移动端h5截图与原生iosandroid的兼容交互
Posted stoolive1
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端h5截图与原生iosandroid的兼容交互相关的知识,希望对你有一定的参考价值。
项目场景:
h5移动端项目需要生成截图与原生app进行图片分享的交互
问题描述:
使用
html2canvas 生成h5截图在android app截图位置偏移且偏移量随机
android截图
ios截图
解决方案:
在IOS使用html2canvas ,Android使用domtoimage
1.https://github.com/niklasvh/html2canvas
2.https://github.com/tsayen/dom-to-image
Android使用domtoimage后截图完整了,但是出现新的问题截图模糊
解决方案:
用canvas重绘截图的同时使用window.devicePixelRatio属性提升图片像素 以免失真
import html2canvas from 'html2canvas'
import domtoimage from 'dom-to-image'
translateBase64ImgToBlob(base64, contentType)
var arr = base64.split(',') //去掉base64格式图片的头部
var bstr = atob(arr[1]) //atob()方法将数据解码
var leng = bstr.length
var u8arr = new Uint8Array(leng)
while (leng--)
u8arr[leng] = bstr.charCodeAt(leng) //返回指定位置的字符的 Unicode 编码
var blob = new Blob([u8arr], type: contentType )
var blobImg =
blobImg.url = URL.createObjectURL(blob) //创建URL
blobImg.name = new Date().getTime() + '.png'
return blobImg
,
base64ToFile(data)
// 将base64 的图片转换成file对象上传 atob将ascii码解析成binary数据
let binary = atob(data.split(',')[1])
let mime = data.split(',')[0].match(/:(.*?);/)[1]
let array = []
for (let i = 0; i < binary.length; i++)
array.push(binary.charCodeAt(i))
let fileData = new Blob([new Uint8Array(array)],
type: mime
)
// eslint-disable-next-line no-unused-vars
let file = new File([fileData], `$new Date().getTime().png`,
type: mime
)
return file
,
/*domtoimage 截图方案
* 问题:domtoimage在真机表现为图片失真
* 解决方案:使用toSvg替换toPng, toSvg转换的svg格式转换为base64的图片,用canvas配合
window.devicePixelRatio对图片进行高清处理
*/
shareAndroid()
const that = this
let card_target = this.$refs.imageDom // 需要截图的dom
domtoimage.toSvg(card_target).then(function(imgUrlBase64)
var img = document.createElement('img')
img.setAttribute('src', imgUrlBase64)
const devicePixelRatio = window.devicePixelRatio
img.onload = function()
var canvas = document.createElement('canvas')
var content = canvas.getContext('2d')
canvas.width = img.width * devicePixelRatio
canvas.height = img.height * devicePixelRatio
content.drawImage(
img,
0,
0,
img.width * devicePixelRatio,
img.height * devicePixelRatio
)
content.mozImageSmoothingEnabled = false
content.webkitImageSmoothingEnabled = false
content.msImageSmoothingEnabled = false
var canvasData = canvas.toDataURL('image/png')
var blob = that.base64ToFile(canvasData)
// console.log(blob)
// blob为所需的file
)
shareIos()
const that = this
const shareContent = document.getElementById('downloadCardDiv') // 需要截图的包裹的(原生的)DOM 对象
this.$nextTick(() =>
const opts =
logging: false, //日志开关,便于查看html2canvas的内部执行流程
width: shareContent.clientWidth, //dom 原始宽度
height: shareContent.clientHeight,
scrollY: 0,
scrollX: 0,
scale: window.devicePixelRatio,
useCORS: true
html2canvas(shareContent, opts).then(canvas =>
// 转成图片,生成图片地址
const imgUrlBase64 = canvas.toDataURL('image/png') //可将 canvas 转为 base64 格式
var blob = that.base64ToFile(imgUrlBase64)
// console.log(blob)
// blob为所需file
)
)
,
以上是关于移动端h5截图与原生iosandroid的兼容交互的主要内容,如果未能解决你的问题,请参考以下文章
android与h5交互原理,h5与原生 app 交互的原理