将HTML页面截取成图片保存 注意:引入jquery.js插件
后台保存
php处理图片代码
public function ajax_crop_img($gid)
{
$contents = $_POST['contents'];
$oss = model('common/oss', 'logic');
$base64_body = substr(strstr($contents,','),1);
//将产品名片上传至阿里云
$return = $oss->save($base64_body,'card','.png');
$res_qrcode = model('product/ProductGoods')->where(['gid'=>$gid])->value('res_qrcode');
if($return['code'] == 200){
if($res_qrcode==''){
//二维码生成成功,写入对应的产品信息
model('product/ProductGoods')->where(['gid'=>$gid])->setField('res_qrcode',$return['url']);
}
echo json_encode(["code"=>200,"message"=>"success","data"=>['imgUrl'=>$return['url']]]);
}
}
HTML页面js代码
var gid = {$goodsInfo['gid']}; html2canvas(document.querySelector("#capture")).then(canvas => { $.post("https://three.api.skinrun.me/web/index/ajax_crop_img", { name: "John",gid:gid ,contents: canvas.toDataURL() } ); });
注意:将要截取的部分的跟标签加上id="capture"