html2canvas

我是谁我在哪_
746 阅读2分钟

最近在做企微应用，涉及到海报绘制保存到手机相册，首先看了一下市场上常用的前端绘制图片的插件，选定html2canvas。

在后端哥哥还没给接口的时候，我所绘制的区域使用的是vant 上的图片 fastly.jsdelivr.net/npm/@vant/a… 及文字。很轻松愉快的实现出来了。

image.png

非常清晰有没有，没有毛病。

在第二天我接通了后端哥哥的接口，问题来了，它来了来了。

image.png

跨域跨域，然后告诉了后端哥哥，他处理了。

然后在企微上面再次绘制，成功了，很棒有没有。接着就拿手机打开企微测一下，我的天啦，图片呢，怎么是空白。打开手机端的console的查看。

image.png

既然有问题，那就处理处理处理 就在网上查资料询问同事，都说是html2canvas版本问题，于是卸载安装了好几个不同的版本都没有效果，另一个同事说是不是加载顺序的问题，我试过用延时来处理都不行，耽误了一下午都没进展。 晚上回到家，询问一个后端大佬朋友，把问题描述了一遍，朋友帮我积极差资料，刚开始也说加载顺序问题，我问他，为什么在谷歌浏览器正常，在苹果端就有问题，于是朋友定位到是兼容的问题，于是积极查资料 资料 资料

image.png

综上资料，朋友说那就他给我一张图片，让我用他的图片生成海报。 于是成功了。我问他怎么配置的图片，给我甩了一段代码

image.png

完事。 第二天一早找到公司的后端小哥，后端负责人给我说，图片是微信返回来的，没有办法去配置修改，我反驳到，但凡能拿到的东西，你再输出给我，不可能修改不了，人家不做声了。然后我就和另外一个小哥配置，我告诉他办法了，他去配置了 。。。。。过了一点时间 后端小哥给我说，让我朋友先把

image.png 这一行给去掉，是不是绘制海报就不行了，于是我让我朋友去掉了，果然是不行。 然后后端小哥过了一会甩给我一张图片链接，让我试一下，绘制出来了，就成功了。 然后我对后端负责人说，人家配置出来了，赶紧去问下怎么配置的，哈哈哈哈哈哈哈哈。 完事了

npm install --save html2canvas     

import html2canvas from "html2canvas";

<div ref="capture" id="capture"></div>

doCut() {

    var that = this;

    html2canvas(document.querySelector("#capture"), {

        allowTaint: true,

        useCORS: true,

        // timeout: 5000,

        // async: false,

        dpi: 3000,

        // scrollY: 0,

        // scrollX: 0,

    }).then((canvas) => {

        const img = new Image();

        img.src = canvas.toDataURL("png");

        // img.setAttribute("crossOrigin", "anonymous");

        canvas.width = that.$refs.capture.offsetWidth * 2 ; // 自定义图片宽度

        canvas.height = that.$refs.capture.offsetHeight * 2;

        var context = canvas.getContext("2d");

        // context.scale(2, 2);

        img.onload = function () {

            var w = img.width;

            var h = img.height;

            console.log(img,w,h,'hhh')

            console.log(that.$refs.capture.offsetWidth,'11')

            let width =that.$refs.capture.offsetWidth * 2

            let height =that.$refs.capture.offsetHeight * 2

            context.drawImage(img, 0, 0, width, height);

            var imgUrl = canvas.toDataURL("image/png");

            // console.log(imgUrl,'imgUrlimgUrl')

            that.$toast.clear()

            that.$nextTick(() => {

                that.imgUrl=imgUrl

            })

    };

    });

},
avatar
文章
阅读
粉丝