背景图上传，调用接口实现文件上传到oss平台，生成背景图链接。

2. 生成页面的小程序二维码

调用小程序二维码生成接口，生成该页面的二维码。详情参考小程序官方文档： developers.weixin.qq.com/miniprogram… 。调用时注意参数长度有限制，如果参数过长会导致二维码生成失败。我们采用的做法是跟小程序约定一套url映射规则，通过特定的参数来匹配对应的h5页面。

3. 编写截图的html代码

4. 调用html2canvas实现截图

// index.js
import html2canvas from 'html2canvas';
html2canvas(this.$refs.shareImgElem, {
  useCORS: true,
  backgroundColor: null
.then(canvas => {
  const dataUrl = canvas.toDataURL('images/jpg');
  // 第一步：将dataUrl转换成Blob
  const blob = this.base64ToBlob(dataUrl);
  // 第二步：上传分享图
  this.uploadShareImg(blob);
// index.vue
// 需要截图的html代码
<div ref="shareImgElem">....</div>
// 截图图片的链接
<img :src="imgUrl" />
此时以为将dataUrl保存下来，就可以完美解决这个需求了。然而事实大跌眼镜，截图生成的base64位的图是白屏的。网上也查询了html2canvas的用法，确定调用方法没有写错，但是截出来的图就是空白的。后来查原因，从最简单的demo开始写起，终于发现了白屏的原因，现总结如下。
 
5. 截图白屏问题总结
 
5.1 图片跨域问题
 
截屏的代码里如果包含图片，图片需要设置允许跨域访问，否则js是读不到图片信息的。如果图片是放在cdn上，cdn需要设置cors相关设置，也就是图片请求的响应头里需要设置Access-Control-Allow-Origin: *
 
我们公司的图片是上传到阿里oss平台，oss里bucket设置跨域信息是控制图片上传时的域名来源的。而我们是需要设置图片读取时能跨域，图片是存放在cdn上，所以联系运维在cdn配置里加上跨域信息即可。
 
5.2 截图元素在屏幕可见范围内
 
图片请求的响应头里加上跨域信息后，截图看还是白屏，接着继续找原因，最后发现当截屏元素在首屏可见范围内就可以生成正确的截图。原来是在截图生成过程中，如果鼠标在滚动，生成出来的截图在canvas画布上会有偏移。解决这个问题有两个操作：
 
5.1 将截图元素提前，放在页面顶部，在屏幕范围之内。
 
5.2 截图生成过程中，页面禁用滚动。代码如下：
 
dom.setScrollTop(0);  // 先滚动到最顶部
document.documentElement.style.position = 'fixed';
5.3 截图生成完成后，页面恢复滚动，代码如下：
 
document.documentElement.style.position = '';
这时终于截图展示出来了。但是此时截图是base64编码的，这么大一串字符，存到后台不大合适，此时考虑将base64字符转换成blob二进制数据流，上传到oss。
 
6. 上传截图
 
6.1 将base64编码的字符转换成blob二进制数据对象。
 
转换代码如下：
 
// base64转换成blob数据
base64ToBlob(dataUrl, type) {
    var arr = dataUrl.split(',');
    var mime = arr[0].match(/:(.*?);/)[1] || type;
    // 去掉url的头，并转化为byte
    var bytes = window.atob(arr[1]);
    // 处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    return new Blob([ab], {
        type: mime
6.2 将blob二进制数据流上传到oss平台
 
代码如下：
 
// 上传Blob二进制数据
uploadBlob(fileName, blob) {
    return new Promise((resolve, reject) => {
        async function putBlob() {
            try {
                let result = await ossClient.put(fileName, blob);
                result.imgUrl = `${CDN_IMAGE_DOMAIN}/${result.name}`;
                resolve(result);
            } catch (e) {
                reject(e);
        putBlob();
// 上传分享大图
uploadShareImg(blob) {
    const fileName = `web/activityms/share_big_img_${Date.parse(new Date())}.jpg`;
        .uploadBlob(fileName, blob)
        .then(res => {
            this.imgUrl = res.imgUrl;
            this.$message.success('朋友圈分享大图上传成功！');
到此，截图生成成功，且成功上传到oss平台，并返回图片路径。
 
作者：邹R-ainna
 链接：https://juejin.im/post/5d60180af265da039b24a30d
 
蜻蜓代理
代理ip
微信域名检测
微信域名拦截检测
微信域名在线拦截检测工具
微信域名在线批量拦截检测工具
                    需求场景运营后台上传一张图，同时页面生成小程序二维码，与运营上传的图合成一张大图，用于该页面在朋友圈的分享传播。实现思路1. 背景图上传背景图上传，调用接口实现文件上传到oss平台，生成背景图链接。2. 生成页面的小程序二维码调用小程序二维码生成接口，生成该页面的二维码。详情参考小程序官方文档：developers.weixin.qq.com/miniprogram…。调用时注意参数...
				
最近有个需求是在vue2.x项目中使用pdf.js，其实以前也用过 pdf.js，以前是用 pdf.js把整个详情页面导出为 pdf，这次是需要用 pdf.js把后台的 pdf转为图片显示在页面上。我是把 pdf 转为 canvas 显示的。
废话不多说，先说用法：
先安装 pdf.js
npm install pdfjs-dist
我看网上也有说在官网下载项目，再把 pdf.js的包放进自己项目的，但我们要用npm安装，所以需要下载的自己去官网下载：
pdf.js 官网 link
引入 pdf.j
import html2canvas from "html2canvas";
1：因需求要点击生成就已经成为的图片，而html2canvas对于display为none的生产不了
解决方法：在需要生成海报的页面，布局好海报的html样式，并设置z-index: -1
2：使用上面那样的方式，当页面滚动一些距离后，生成的图片不完整
解决方法：
data() {
    return {
      dataImg:
				
npm run dev 启动报Module not found: Error: Cannot resolve module  ‘xxx‘ in xxxxx
最后发现在install的时候没有下载 html2canvas 类库。
手动下载依赖 npm install --save html2canvas 后项目正常运行。
项目正常运行。
11:20:09.184 文件查找失败：'html2canvas' at fa_index\createposter.vue:140
11:20:09.200 文件查找失败：'html2canvas' at fa_index\gerateposter.vue:31
在原项目中查找html2canvas，可以看到html2canvas的配置信息
				
他这是运行jar包 执行webpack的package.json 到外面的node_modules
webpack -v undefined的时候  先把  dyclound 下的 node-modules删除
然后安装webpack
webpack@4.46.0 -g   npm install webpack-cli  -g
1.点击安装webpack 监视后
—报错node-sass------
[npminstall:runscript:error] node-sass@4.5.3 scripts
				
有时候，我们明明没做其它什么配置，只是升级了某些依赖软件的版本，但是当我们下载依赖的时候，会出现Cannot resolve xxx的情况，即本地没有找到对应版本的依赖包。
常规解决办法如下：
1）检查idea设置里面的maven设置，查看相关maven的配置路径是否正确。
2）清除缓存并重启idea
很多时候重启可以解决一大部分问题
3）刷新pom文件
我遇到的问题用上面方案都不能解决，我的问题是：
pom文件升级了某个开源软件，但是在reload项目的时候会报Cannot resolve 
        // svg转canvas，用于联线关系导出图片
        convertSvg2Canvas() {
            if (typeof html2canvas !== 'undefined') {
				
继我的上一篇博客——https://blog.csdn.net/Sun_of_Rainy/article/details/86693056
现在来解决问题，解决思路（同事帮忙想出来的，我来学习哈，顺便记录下）是通过js将数据放到文件中，将文件传给后台
将画布数据转成文件的方法
我的js截图方法代码贴出来：
function saveUserTemplateAsImageData(){...
通过谷歌搜索 发现原因是
因为截取尺寸较大 导致生成base64 长度太大 ,达到了a标签的href 上限，所以报错下载失败，解决方案是 将base64 dataURI转换为Blob 文件对象
然后a 链接下载 blob文件路径
// edited ...
解决方案： 需要截图的节点根样式添加font-variant: normal；
2. 文字向下偏移。
解决方案： 指定html2canvas的版本号为1.0.0-alpha.12
3. 不完整，缺失，留白。
出现情况： 当截图区域超过视图高度，且滚动条未处在顶部时，会出现。
解决方案： 截图之前控制滚动条至顶部。
4. 模糊，不清晰。
出现情况： 通常是图片设置为背景的情况下，截图会比较模糊。
解决方案： 将背景图通过img标签加定位的方式实现。
				
生成的海报在有时候会发生偏移，发现是在滚动条不为0的时候就会偏移，所以在生成海报前将滚动条滚动到顶部
document.body.scrollTop=document.documentElement.scrollTop=0
ps:使用的配置：