|
发表于 2019-3-14 12:07:59
|
显示全部楼层
本楼为最佳答案
 首先图片不能是有跨域的 需要一个服务器才能正常运行getImageData() 有这两点 上代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <canvas id="c"></canvas>
- <script>
- //方法 url可以是img节点 也可以是url地址 跨域地址请不要用 会报错
- function getImgData(url){
- var c = document.createElement("canvas");
- var c2d = c.getContext("2d");
- var img = null;
- //判断是字符串还是img对象
- if(typeof url == "string"){
- img = new Image();
- img.src = url;
- }else{
- img = url;
- }
- //获取img对象图片信息
- function getDate(img){
- c.width = img.width;
- c.height = img.height;
- c2d.drawImage(img,0,0,c.width,c.height);
- return c2d.getImageData(0,0,c.width,c.height);
- }
- //通过promise异步处理图片数据 如果图片没有加载完成就等待加载完成了进行获取图片数据
- function s(success,fail){
- if(img.complete){
- success(getDate(img));
- }else{
- img.onload=function(){
- success(getDate(img));
- };
- img.onerror=function(){
- fail("错误啦");
- };
- //设置加载超时
- setTimeout(function () {
- fail("错误啦")
- },15000);
- }
- }
- return new Promise(s);
- }
- getImgData("img.png").then(function(data){
- var canvas = document.getElementById("c");
- canvas.width = data.width;
- canvas.height = data.height;
- var c2d = canvas.getContext("2d");
- c2d.putImageData(data,0,0);
- });
- </script>
- </body>
- </html>
复制代码 |
|