前言:
项目中需要实现图片下载功能,第一个想到的是使用a标签的download属性来实现,但是在不同浏览器下测试会发现,有的浏览器无效,点击后直接预览图片,所以,上网找到了另外一种兼容不同浏览器的图片下载的方法,那就是利用canvas来处理图片,实现下载;
1.项目中点击事件绑定:
<a href="#" @click.prevent="downloadIamge(imgsrc, name)"><span>{{name}}</span></a>
2.点击事件中操作:
downloadIamge (imgsrc, name) {
const url = imgsrc
this.convertUrlToBase64(url).then((base64) => {
const blob = this.convertBase64UrlToBlob(base64)
if (getBrowser() === 'IE' || getBrowser() === 'Edge') {
window.navigator.msSaveBlob(blob, name)
} else {
const a = document.createElement('a')
const body = document.querySelector('body')
a.download = name || 'image'
a.href = URL.createObjectURL(blob)
a.style.display = 'none'
body.appendChild(a)
a.click()
body.removeChild(a)
window.URL.revokeObjectURL(a.href)
}
})
},
3.this.convertUrlToBase64(url)就是利用canvas和toDataURL把图片转成base64格式并返回
convertUrlToBase64 (url) {
return new Promise((resolve, reject) => {
const img = new Image()
img.crossOrigin = 'Anonymous'
img.src = url
img.onload = function () {
const canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height)
const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
const dataURL = canvas.toDataURL('image/' + ext)
const base64 = {
dataURL: dataURL,
type: 'image/' + ext,
ext: ext
}
resolve(base64)
}
})
},
其中:img.crossOrigin = 'Anonymous'是前端对图片的跨域处理;
4.this.convertBase64UrlToBlob(base64)是将图片base64流文件转成blob文件
convertBase64UrlToBlob (base64) {
const parts = base64.dataURL.split('base64,')
const contentType = parts[0].split(':')[1]
const raw = window.atob(parts[1])
const rawLength = raw.length
const uInt8Array = new Uint8Array(rawLength)
for (let i = 0; i < rawLength; i++) {
uInt8Array[i] = raw.charCodeAt(i)
}
return new Blob([uInt8Array], { type: contentType })
},
5.getBrowser()用来判断浏览器,解决浏览器兼容性问题:
import { getBrowser } from '@/utils/utils'
export function getBrowser () {
const userAgent = navigator.userAgent
if (userAgent.indexOf('OPR') > -1) {
return 'Opera'
}
if (userAgent.indexOf('Firefox') > -1) {
return 'FF'
}
if (userAgent.indexOf('Trident') > -1) {
return 'IE'
}
if (userAgent.indexOf('Edge') > -1) {
return 'Edge'
}
if (userAgent.indexOf('Chrome') > -1) {
return 'Chrome'
}
if (userAgent.indexOf('Safari') > -1) {
return 'Safari'
}
}
6.如果是IE或者Edge浏览器,可以直接使用window.navigator.msSaveBlob(blob, name)完成下载;
声明:由于ios系统有安全性限制,以上方法在ios上无效;
以上就是记录项目中用到的图片下载,浏览器兼容的问题,涉及到的base64和blob的知识点和原理还不是很清晰,有时间一定要研究一下,整个方法,亲测有效;
来自:https://segmentfault.com/a/1190000019331068
Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。
上传截图很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延。用canvas提供的API实现纯前端的剪切:这里头关键有三步:显示未经处理的图片,得到裁剪区域,显示裁剪后的区域。
javascript完成图片格式转换: 通过input上传图片,使用FileReader将文件读取到内存中。将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,最后将canvas转换为图片。
现在因为有了离屏Canvas,你可以不用在你的主线程中绘制图像了!Canvas 是一个非常受欢迎的表现方式,同时也是WebGL的入口。它能绘制图形,图片,展示动画,甚至是处理视频内容
最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难,上手就可以做,写两个for循环。,IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。
利用canvas将网页元素生成图片并保存在本地,首先引入三个文件,createElementNS() 方法可创建带有指定命名空间的元素节点。 createElementNS(ns,name) > createElementNS() 方法与 createElement() 方法相似
随着大数据时代的来临,物联网的日益发展,原先的 SCADA 系统本身也在求新求变,从最开始的专业计算机和操作系统,到通用计算机和相关软件,再到现在基于 HTML5 Canvas 的新型组态开发,其应用的范围也从最初的电力
在写下合格粒子运动时要先清楚你的思路,不能一开始就盲目的开始写,首先先要确定思路然后在去一步步的实现,在写的过程要注意细节,要思考js有些知识是跟数学知识相关的要注意观察
canvas 画的圆不是圆,是椭圆。不要在style里指定 Canvas 的宽度,Canvas 画布的尺寸的大小和显示的大小是有很大的区别的,在 canvas 里面设置的是才是 Canvas 本身的大小。不要企图通过闭合现有路径来开始一条新路径
由于一些移动端的兼容性原因,我们某个项目需要前端将pdf转换成在移动端页面可直接观看的界面。为了方便解决,我们采用了pdf.js这个插件,该插件可以将pdf转换成canvas绘制在页面上
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!