html2canvas 合成图片 跨域问题处理 及 点击保存图片(与客户端交互)

<img class="avatar" crossorigin='anonymous' v-formatImage :src="personal.icon" alt="">

crossorigin=‘anonymous’ 必须加上该属性

v-formatImage 为默认图片指令

// 点击 保存图片
 save() {
     this.loading = true
     this.stopBodyScroll(true) // 锁定滚动条 必须锁定不然合成图片会变形

     html2canvas(document.querySelector('#capture'), {
         	dpi: window.devicePixelRatio * 4,  // 需加上该属性 不然图片会模糊
            useCORS: true,
            logging: true,
            allowTaint: true,
            scale: 2, // 需加上该属性 不然图片会模糊
            backgroundColor: 'transparent'
     }).then(canvas => {
         const base64Url = canvas.toDataURL('image/png', 1)

         this.saveImageToPhoneAlbum(this.dataURLtoFile(base64Url)) // 需转化成base64格式
     })
 },

 // 保存图片到手机
 async saveImageToPhoneAlbum(base64Url) {
     const res = await uploadImg(base64Url) // 上传图片 需取到上传服务器之后绝对路径

     this.dataURL = newParsingPath(res.data.url)

     console.log('this.dataURL: ', this.dataURL)

     jsBridgeClient.saveImage(this.dataURL) // 与客户端交互方法
     this.stopBodyScroll(false) // 解除滚动条
     this.loading = false
 },

 //将base64转换为blob 再转为file文件流
 dataURLtoFile(dataUrl, filename = '123456.png') {
     let arr = dataUrl.split(','),
         mime = arr[0].match(/:(.*?);/)[1],
         bstr = atob(arr[1]),
         n = bstr.length,
         u8arr = new Uint8Array(n)
     while (n--) {
         u8arr[n] = bstr.charCodeAt(n)
     }
     let blob = new Blob([u8arr], { type: mime })
     return new window.File([blob], filename, { type: 'image/jpeg' })
 },

 // 上传图片请求
 async uploadImg(base64Url = '') {
     try {
         const res = await uploadImg(base64Url)  // 上传图片方法 封装 （这里后端返回是相对路径）
         let url = res.data.url
         if (url) {
             const domain = `https: //upload.com`  // 服务器域名  (需拼接绝对路径)
             this.pageData.imgUrl = domain + url
         } else {
             console.log('取消上传')
             // this.$toast('取消图片上传')
         }
     } catch (e) {
         this.$toast('图片上传失败,请重新上传!')
     }
 },

 stopBodyScroll(isFixed) {
     if (isFixed) {
         this.scrollTop = document.scrollingElement.scrollTop || window.scrollY

         document.body.style.position = 'fixed'
         document.body.style.top = -this.scrollTop + 'px'
     } else {
         document.body.style.position = 'relative'
         document.body.style.top = 'unset'

         window.scrollTo(0, this.scrollTop) // 回到原先的top
     }
 }

Tips: 1、如果出现跨域问题，请配置Http header头 。
2、请仔细看代码注释

以下有使用腾讯云设置解决方法及链接

腾讯云对象存储

设置跨域访问

官网文档: link.

腾讯云内容分发网络CDN

设置跨域访问

官网文档: link.