美文网首页
canvas.js将HTML页面截取成图片保存

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

作者: 刚_dbac | 来源:发表于2018-01-10 17:15 被阅读0次

    将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"

    相关文章

      网友评论

          本文标题:canvas.js将HTML页面截取成图片保存

          本文链接:https://www.haomeiwen.com/subject/zguonxtx.html