图片合并成海报

1.解决 html2canvas 白边问题

html
<div ref="imageWrapper" class="iswap" id="imageWrapper">
<!--这里是省略的html内容-->
</div>

css
#imageWrapper{
width: 340px;
height: 480px;
overflow: visible !important;
}

js，由于canvas在绘制过程中
down(){
var _this = this
window.scrollTo(0, 0); //如果你的窗口滚动的话需要，
let imageWrapper = document.getElementById('imageWrapper')
html2canvas(imageWrapper, {
x: imageWrapper.getBoundingClientRect().left + 13, // 绘制的dom元素相对于视口的位置，由于获取的位置比原本往前偏离的所以要加上，你需要根据自己的视图去计算
y:imageWrapper.getBoundingClientRect().top, // top没有偏离所以不用修改
backgroundColor: null, // 解决生成的图片有白边，只单单加和这个并没有效果
width:imageWrapper.offsetWidth - 15, // 因为多出的需要剪裁掉，
height:imageWrapper.offsetHeight,
useCORS: true,
scale:3, // 因为生成图片会模糊，但是这个会使下载的图片变大，可以使用base64压缩
dpi: window.devicePixelRatio, //z
}).then(canvas => {
const img = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,", "")
const finalImageSrc = "data:image/jpeg;base64," + img
// 添加a标签用于下载
const aElem = document.createElement('a')
document.body.appendChild(aElem) // 223kb
aElem.href = finalImageSrc
// 图片下载名
aElem.download = "erwei.jpg"
aElem.click()
document.body.removeChild(aElem) // 完成后移除
})
},

2.兼容ie浏览器，实现base64图片下载

// 这里是获取到的图片base64编码,这里只是个例子哈，要自行编码图片替换这里才能测试看到效果
const imgUrl = 'data:image/png;base64,...'
// 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
if (window.navigator.msSaveOrOpenBlob) {
var bstr = atob(imgUrl.split(',')[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
var blob = new Blob([u8arr])
window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
} else {
// 这里就按照chrome等新版浏览器来处理
const a = document.createElement('a')
a.href = imgUrl
a.setAttribute('download', 'chart-download')
a.click()
}

3.复制canvas图片

// 尝试过复制canvas和table，但不能达到预期效果。所以这里还是转为img再下载
if (window.getSelection) {
//chrome等主流浏览器
var selection = window.getSelection();
var range = document.createRange();
range.selectNode($("#imgTitle")[0]);
selection.removeAllRanges();
selection.addRange(range);
} else if (document.body.createTextRange) {
//ie
var range = document.body.createTextRange();
range.moveToElementText($("#imgTitle")[0]);
range.select();
}
if (document.execCommand("Copy", "false", null)) {
hrc.box.messageBox({ type: "dismiss", title: "复制成功" });
} else {
hrc.box.messageBox({ type: "error", title: "复制失败" });
return;
}

// copy之后清空选择区域
window.getSelection().removeAllRanges();