img和canvas的相互转换

canvas.toDataURL()跨域问题的解决

HTMLCanvasElement.toDataURL()

<img >加上crossOrigin="anonymous"之后导致图片无法显示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><title>demo</title><script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script><style>* {margin: 0;padding: 0;}body,html {width: 100%;height: 100%;}</style>
</head><body><canvas width="400" height="300"></canvas><img>
</body>
<script>$(function () {var cav = $('canvas')[0],ctx = cav.getContext('2d')var img = new Image()// 允许跨域，后端需要在响应头添加'Access-Control-Allow-Origin: *'(cors解决跨域)img.crossOrigin = '*'img.onload = function () {// img转换为canvasctx.drawImage(img, 0, 0)ctx.fillRect(0, 0, 50, 50)try {// 读取图片base64 [不传会默认读取为image/png格式，不可压缩] [如果把png图片读取为image/jpeg，那么透明区域会变黑，可大幅度压缩质量] [如果读取为image/webp格式，只有谷歌支持读取和显示这种格式]var base64 = cav.toDataURL()console.log(base64)// canvas 转换为 img$('img')[0].src = base64} catch (err) {// 报错'Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.'表示图片需同源console.warn('图片需同源')}}// src最后赋值，为了兼容ie8img.src = 'http://oeaqy69vv.bkt.clouddn.com/1.jpg'})
</script></html>

img和canvas的相互转换相关推荐

html5 自动扣图,利用canvas实现一个抠图小工具
本文作者:IMWeb 孙世吉未经同意,禁止转载利用canvas实现一个抠图小工具 0 前言作为新一代的前端开发工程师,PS抠图切图已经不是必备技能了,我们有UI/交互/视觉等更专业的设计同学帮我 ...
推荐一些有趣实用的前端可视化工具库，助力可视化开发
前言前端可视化一直是人们常谈到的词,随着SVG,Canvas,WebGL等技术的发展,也涌现了一大批的优秀的可视化库.本文将从中选择一些有趣实用的推荐给大家,工具使用好了,开发效率自然也就提升了. ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
图片或文件Blob、File、Base64之间的相互转换
Blob.File.Base64之间的相互转换前言 base64 转 Blob 对象 base64 转 File 对象 File 对象,Blob 对象转base64 blob链接转 base64 ...
图片base64，file,blob格式的相互转换，以及gif转base64
图片base64,file,blob格式的相互转换,以及gif转base64(第六点) 1.new Image()图片链接转base64 只能转化为普通的jpg/png图片.无法转化gif图 type ...
android 锥形进度条,canvas锥形渐变进度条
从一个渐变圆角进度条浅出画一个圆开始这一切需要从一个(简单)的需求开始,在最开始对设计第一眼看到这张图的时候,感觉挺简单的嘛,直接用echarts饼图模拟出来一个就好了 echarts 然后上ec ...
android 锥形进度条,canvas锥形进度条怎么渐变
从一个渐变圆角进度条浅出画一个圆开始这一切需要从一个(简单)的需求开始,在最开始对设计第一眼看到这张图的时候,感觉挺简单的嘛,直接用echarts饼图模拟出来一个就好了 echarts 然后上ec ...
JS中ArrayBuffer、Uint8Array、Blob与文本字符之间的相互转换
前端 File 上传.下载,Canvas 保存图片,Ajax 和 Fetch 二进制流传输,PDF 预览,浏览器上 WebAssembly 的应用等等都需要用到 ArrayBuffer 和 Blob ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...

img和canvas的相互转换

img和canvas的相互转换相关推荐

最新文章

热门文章