html2canvas的使用

1、安装`html2canas`

yarn add html2canvas

2、使用`html2canvas`

<!-- 业务逻辑的原因，我这里使用的富文本字符串 -->
<div  class="container" ref="imageDom"><div v-html="contentToImg"></div>
</div>

引入html2canvas

  import html2canvas from "html2canvas"// 生成图片toImg(content) {this.contentToImg = contentthis.$nextTick(() => {html2canvas(this.$refs.imageDom,{useCORS: true, // 跨域dpi: window.devicePixelRatio * 4,scale: 2,}).then(canvas => {// 转成图片，生成base64图片地址this.imgUrl = canvas.toDataURL("image/png");console.log(this.imgUrl);this.downloadFile(this.title,this.imgUrl)});})},//下载到本地downloadFile(fileName, content) {let aLink = document.createElement('a');let blob = this.base64ToBlob(content); //new Blob([content]);let evt = document.createEvent("HTMLEvents");evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为aLink.download = fileName;aLink.href = URL.createObjectURL(blob);// aLink.dispatchEvent(evt);aLink.click()},//base64转blobbase64ToBlob(code) {let parts = code.split(';base64,');let contentType = parts[0].split(':')[1];let raw = window.atob(parts[1]);let rawLength = raw.length;let uInt8Array = new Uint8Array(rawLength);for (let i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i);}return new Blob([uInt8Array], {type: contentType});},

跨域问题

前端使用useCORS: true配置项
后端Nginx服务器配置

add_header  'Access-Control-Allow-Origin' '*';
add_header  'Access-Control-Allow-Headers' '*';
add_header  'Access-Control-Allow-Credentials' 'true';
add_header  'Access-Control-Allow-Methods' '*';

这样就大功告成了

html2canvas的使用以及跨域问题相关推荐

php把网络图片转化为base64格式，解决html2canvas图片跨域问题
一.前言最近在用html2canvas做网页截图功能.这个开源库使用很简单,代码也很方便,但难点在于跨域问题.比如说,我的一个页面中有图片也有文字,图片是来自于图片服务器的网络图片.此时我们要生成截 ...
网页保存为图片及高清截图的优化 | canvas跨域图片配置
本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能,常见于H ...
html2canvas解决图片空白，网络图片跨域
解决思路:前端将网络图片转换成64位格式不需要设置什么阿里云服务器跨域,nginx配置header等等 1.准备一个canvas标签用于转换64位格式图片 <canvas ref=" ...
解决-使用html2canvas截取页面时，页面的div背景图无法截取并跨域
今天在研究html2canvas截取页面的时候,发现截取后的图片没有把应该截取元素的背景图片截掉,背景图片空白.此时谷歌浏览器控制台报Failed to load resource: net::ERR ...
html2canvas图片跨域问题
针对html2canvas图片跨域问题处理根据html2canvas文档说明,图片跨域只需配置 useCORS:true即可解决跨域问题: 但是,经过百般尝试,加了这个还是不行,就衍生出很多转成ba ...
html2canvas跨域踩坑日常
这两天接到公司的指令做海报图分享然后尝试使用html2canvas+uview+uniapp进行编写踩坑如下 html2canvas跨域问题我司使用的是oss云存储,起初发生跨域以为是本地原因导 ...
html2canvas 画图出现空白的情况，引出图片跨域的相关问题
其实这个是因为我们的canvas在绘制的时候发现了不同源头的资源,这个时候浏览器会认为污染了当前canvas同时也会带来一系列安全的问题. . 在"被污染"的canvas中调用以下 ...
前端之路：html2canvas脱坑，（图片模糊，多次加载，图片跨域）
有女票的程序员真的颓废,都不记得多久没写心路历程了(T T). 插件简介: 1.官网:http://html2canvas.hertzen.com/ 2.GitHub:https://github.c ...
html2canvas微信头像跨域,企业微信头像前端使用canvas处理时跨域
拿到的企业微信头像是正方形我需要使用canvas处理成圆形但处理时发现会有跨域问题正常微信的图片就没有问题只有企业微信的域名头像会提示跨域 const canvas = document.cr ...

html2canvas的使用以及跨域问题

html2canvas的使用

1、安装`html2canas`

2、使用`html2canvas`

跨域问题

html2canvas的使用以及跨域问题相关推荐

最新文章

热门文章

html2canvas的使用以及跨域问题

html2canvas的使用

1、安装html2canas

2、使用html2canvas

跨域问题

html2canvas的使用以及跨域问题相关推荐

最新文章

热门文章

1、安装`html2canas`

2、使用`html2canvas`