canvas.js将HTML页面截取成图片保存

将HTML页面截取成图片保存  注意：引入jquery.js插件

HTML页面引入canvas截图

后台保存

代码截图

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"