分享：将html保存为图片

[nanyang24]

最近在做的一个case其中有个需求点是 长按保存图片，本以为这是一张设计出好的图片，等实际看完需求文档才发现图片上面的数据是后端返回的，那么图片肯定是要在前端生成了。方法在这里做个分享。

html2canvas

首先利用到了一个叫做 html2canvas 的库，顾名思义，可以将我们写好的 html 转成 canvas，之后我们将 img.src 赋值为 canvas.toDataURL()。

import H2C from 'html2canvas';

//  ........

H2C(this.picContent, {
    useCORS: true
}).then(canvas => {
    let imgEle = document.createElement('img');
    imgEle.src = canvas.toDataURL();
    imgEle.style.width = '100%';
    this.saveDiv.appendChild(imgEle);
    this.popup.removeChild(this.picContent);
});

//  ........

这样基本就算完成了，用户可以长按图片调用native的保存图片接口。

img.onload

但发现实际的图片效果是html都完美的显示上去了，图片区域是空白的。其实这是因为图片还没加载完成，我们就将html转为canvas了，解决很简单：

this.prizeImg.onload = () => {
    H2C(this.picContent, {
        useCORS: true
    }).then(canvas => {
        let imgEle = document.createElement('img');
        imgEle.src = canvas.toDataURL();
        imgEle.style.width = '100%';
        this.saveDiv.appendChild(imgEle);
        this.popup.removeChild(this.picContent);
    });
}

当图片onload后再转为canvas。

显示 & 保存

最后需求又特意标明：用户看到并长按保存的图片与实际保存的要不同。

什么意思呢？就是用户实际保存的图片是稍有区别的，比如去掉了 长按保存图片的字样，增加了公司的二维码等分享。

这时候就需要我们把实际保存的那张图片 “盖” 在用户实际看到的那张图片之上，并且将在上方的图片设置为透明。

this.prizeImg.onload = () => {
    // 显示的图片
    H2C(this.fakePicContent, {
        useCORS: true
    }).then(canvas => {
        let imgEle = document.createElement('img');
        imgEle.src = canvas.toDataURL();
        imgEle.style.width = '100%';
        this.showDiv.appendChild(imgEle);
        this.popup.removeChild(this.fakePicContent);
    });

    // 隐藏的图片
    H2C(this.picContent, {
        useCORS: true
    }).then(canvas => {
        this.saveDiv.style.opacity = 0;
        let imgEle = document.createElement('img');
        imgEle.src = canvas.toDataURL();
        imgEle.style.width = '100%';
        this.saveDiv.appendChild(imgEle);
        this.popup.removeChild(this.picContent);
    });
};

结语

这样就大功告成了

[hongzzz]

博主懂得很多，关注了

[nanyang24]

方法是他想出来的：@hongzzz 😄