直接上代码。
前端代码:
var bgsrc = "img1.png";
var src = "img2.png";
drawAndShareImage(bgsrc, src);
function drawAndShareImage(bgsrc, src) {
let canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 531;
let context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
let bgImg = new Image();
bgImg.src = bgsrc; // 背景图的url
bgImg.crossOrigin = 'Anonymous';
bgImg.onload = () => {
context.drawImage(bgImg, 0, 0, 300, 531);
let img = new Image();
img.src = src; // 需要合进去的图片url
img.crossOrigin = 'Anonymous';
img.onload = () => {
context.drawImage(img, 66, 231, 168, 168);
let base64 = canvas.toDataURL('png');
// 发给后端,后端保存并可返回地址到前端再做显示。
$.post("{WEB_PATH}/mobile/ajax/sharesimg/", {img: base64}, function (data) {
// Do something
});
//canvas直接将 base64 图片显示到img标签
// $(".shareImg img").attr("src", base64);
}
}
}
后端代码(具体根据你自己业务逻辑更改):
public function sharesimg()
{
if (!$this->userinfo) {
echo 0;
die;
}
$member = $this->userinfo;
$img = isset($_POST['img']) ? rawurldecode($_POST['img']) : '';
if (empty($img)) {
echo 0;
die;
}
$uid = $this->userinfo['uid'];
$memberinfo = $this->db->GetOne("select * from `@#_member` where uid='$uid'");
if (empty($memberinfo['sharesimg'])) {
//匹配出图片的格式
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $img, $result)) {
$type = $result[2];
$filename = 'sharesimg/' . time() . ".jpg";
$new_file = dirname($_SERVER['SCRIPT_FILENAME']) . '/data/uploads/' . $filename;
$base64_body = substr(strstr($img, ','), 1);
if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $img)))) {
$sql = "update `@#_member` set sharesimg='$filename' where uid='$uid'";
if ($this->db->Query($sql)) {
$tname = $filename;
if (file_exists($new_file)) {
$wh = getimagesize($new_file);
$x = 0;
$y = 0;
$w = $wh[0];
$h = $wh[1];
$point = array("x" => $x, "y" => $y, "w" => $w, "h" => $h);
System::load_sys_class('upload', 'sys', 'no');
upload::thumbs(160, 160, false, G_UPLOAD . $tname, $point);
upload::thumbs(80, 80, false, G_UPLOAD . $tname, $point);
upload::thumbs(30, 30, false, G_UPLOAD . $tname, $point);
}
echo $filename;
} else {
echo 0;
}
} else {
echo 0;
}
} else {
echo 0;
}
} else {
echo $memberinfo['sharesimg'];
}
}
网友评论