安卓微信中长按base64图片无法保存的解决办法

遇到的问题:后端返回的是base64格式的图片,前端拿到返回体后进行拼接展示在img标签上,微信长按图片进行保存,发现苹果长按保存成功,安卓长按保存后相册中保存的图片时黑色的(且提示格式损坏)

  this.imgUrl = "data:image/jpeg;base64," + res.content.base64_image;<div class="img-box" ref="imageTofile"><img  :src="imgUrl" alt=""  /></div>

解决办法,使用html2canvas插件进行重新绘制,根据设备来选择渲染方法

1.下载html2canvas

npm install --save html2canvas

2.导入html2canvas

import html2canvas from 'html2canvas';

3.使用html2canvas

            this.imgUrl = "data:image/jpeg;base64," + res.content.base64_image;let ua = navigator.userAgent;let isAndroid = ua.indexOf("Android") > -1 || ua.indexOf("Linux") > -1; //判断设备是不是安卓if (isAndroid) { //如果是安卓,则使用html2canvas绘制html2canvas(this.$refs.imageTofile, { //this.$refs.imageTofile是我的img的父盒子backgroundColor: null,useCORS: true, //解决跨域windowWidth: document.body.scrollWidth,windowHeight: document.body.scrollHeight,x: this.$refs.imageTofile.offsetLeft,y: this.$refs.imageTofile.offsetTop,scale: 6, // 这是分辨率倍数,一般是2,越高图片越大,越清晰}).then((canvas) => {let url = canvas.toDataURL('image/png');this.imgUrl = url})}

解决办法2.使用原生canvas进行重新绘制,(优点:不用根据设备来选择渲染方法,ios/安卓都能兼容)

1.页面上创建一个canvas容器,设置其隐藏

 <canvas v-show="false" ref="picture"></canvas>

2.使用canvas重新绘制并赋值

  this.imgUrl = "data:image/jpeg;base64," + res.content.base64_image;//这个路径只能苹果保存let img = new Image();img.src = this.imgUrl;this.$nextTick(() => {let canvas = this.$refs.picture; //获取到canvas的DOMlet ctx = canvas.getContext('2d'); //使用2d绘图img.onload = () => {canvas.width = img.width; canvas.height = img.height;ctx.drawImage(img, 0, 0, img.width, img.height); //完整的将this.imgUrl给裁剪下来let canvasURL = canvas.toDataURL('image/jpeg'); this.imgUrl = canvasURL;}})

安卓微信中长按base64图片无法保存的解决办法相关推荐

苹果端手机微信页面长按图片无法保存的解决方案
苹果端手机微信页面长按图片无法保存的解决方案参考文章: (1)苹果端手机微信页面长按图片无法保存的解决方案 (2)http://www.cnblogs.com/xiaofengju/p/580748 ...
微信保存图片提示失败_微信发不出去图片的4种解决方法
小编像很多网友一样,每天刷微信,还喜欢在微信上分享一些生活照片或者有趣的图片.不过,最近小编的微信突然发不出去图片了,这可是让小编非常着急.难道是手机坏了.还是因为现在连的wifi信号有问题,还有其他 ...
word无法显示图像计算机可能没有足够的,Word图片显示不出来怎么办 Word图片显空白的解决办法-电脑教程...
最近百事网小编钢琴下的旋律发来了一些Word投稿文档,不过奇怪的是Word里边的很多图片都显示不出来,原先以为可能是图片过多,可能一下子没载入完,不过等待很长一段时间后,很多Word里边的图片依旧显示 ...
wordpress搜索不了中文linux,WordPress上传带中文汉字名称的图片不显示的解决办法...
以上是WordPress上传带中文汉字名称的图片不显示的情况,正常上传成功的话,在上图两个地方都会有图片缩略图显示.相信很多WordPress装载linux系统上的朋友都会遇到这样的错误. WordP ...
微信小程序 border设置单边框失效解决办法
微信小程序 border设置单边框失效解决办法遇到的问题解决的方法总结遇到的问题 border-right: 1 rpx solid #ccc;border-bottom: 1 rpx sol ...
安卓开发使用Bmob遇到的一些问题及解决办法
安卓开发使用Bmob遇到的一些问题及解决办法最近在做安卓的大作业,在数据库方面遇到了很多困难,最后决定使用Bmob云数据库作为后端.在按照官方文档将Bmob SDK配置到Android Studio ...
微信收到消息很慢无法连接服务器,微信消息延迟几分钟才收到微信收消息有延迟的原因及解决办法...
微信收到消息总是延迟怎么回事呢?第一个就是网络延迟,第二个是手机信号不好,第三个就是微信自己设置的问题.下面,我们来看看微信收消息有延迟的原因及解决办法. 微信消息延迟几分钟才收到怎么回事一.网络延 ...
iOS微信分享，提示“未验证应用”的解决办法
iOS微信分享,提示"未验证应用"的解决办法 nginx配置下面代码方法1: #iOS微信分享,提示"未验证应用"的解决办法location /apple-a ...
“由于文件许可权错误,word无法完成保存操作”解决办法
"由于文件许可权错误,word无法完成保存操作"解决办法自身实践之后,该方法有效: 转载自:https://blog.csdn.net/qq_43679849/article/d ...

安卓微信中长按base64图片无法保存的解决办法

遇到的问题:后端返回的是base64格式的图片,前端拿到返回体后进行拼接展示在img标签上,微信长按图片进行保存,发现苹果长按保存成功,安卓长按保存后相册中保存的图片时黑色的(且提示格式损坏)

解决办法,使用html2canvas插件进行重新绘制,根据设备来选择渲染方法

1.下载html2canvas

2.导入html2canvas

3.使用html2canvas

解决办法2.使用原生canvas进行重新绘制,(优点:不用根据设备来选择渲染方法,ios/安卓都能兼容)

1.页面上创建一个canvas容器,设置其隐藏

2.使用canvas重新绘制并赋值

安卓微信中长按base64图片无法保存的解决办法相关推荐

最新文章

热门文章