canvas颜色提取器，解决跨域问题

最新推荐文章于 2024-04-01 16:53:00 发布

chonyhaha

最新推荐文章于 2024-04-01 16:53:00 发布

阅读量619

点赞数

文章标签： javascript css canvas

本文链接：https://blog.csdn.net/chonyhaha/article/details/122675338

版权

canvas颜色提取器，解决跨域问题

canvas颜色提取

<style>
    #canvas{
       border: 1px solid black; 
       float: left;
       margin-right: 30px;
    }
    #hovered-color{
        border: 1px solid black;
        width: 100px;
        height: 300px;
        float: left;
        margin-right: 50px;
    }
    #selected-color{
        border: 1px solid black;
        width: 100px;
        height: 300px;
        float: left;
    }
</style>
<body>
    <canvas id = 'canvas' width="500" height="300"></canvas> 
    <div id = 'hovered-color' ></div>
    <div id = 'selected-color'></div>
</body>
<script>
    var canvas = document.getElementById('canvas');
    if(canvas.getContext){
        ctx = canvas.getContext('2d');
        var img = new Image();
        // 图片的跨域操作
        img.crossOrigin = 'Anonymous';
        img.src = 'images/background.jpg';  // 采用这种方式必须要服务器
        img.onload = function(){  // 确定图片在被加载
            ctx.drawImage(img,0,0);   
            img.style.display = 'none';  // 这个不一定有  
        };
        // 似乎明白了缺少什么，两个简单的展示框
        var hoveredcolor = document.getElementById('hovered-color');
        var selectedcolor =  document.getElementById('selected-color');
        // 其实只有一个方法，就是用来提取色素的
        function pick(event,destination){
            var x = event.layerX;
            var y = event.layerY;
            var pixel = ctx.getImageData(x,y,1,1);  // 确定多大范围的数据
            var data = pixel.data;  // 获取数据的元组
            const rgba = `rgba(${data[0]},${data[1]},${data[2]},${data[3]/255})`;
            destination.style.background = rgba;
            destination.textContent = rgba; 
            
            return rgba;
        } 
        canvas.addEventListener('mousemove',function(event){
            pick(event,hoveredcolor);
        });
        canvas.addEventListener('click',function(event){
            pick(event,selectedcolor);
        });
    }
</script>

1、获取鼠标的坐标，getImageData()函数可以获取制定范围的图像rgba数据信息
2、像素解析为rgba元组，其中的数据信息便可以提取出来了
整个过程只有一个方法，很多人都在提跨域可以解决问题，没有给出之后的代码部分。其实很简单。
具体原因：img.src = ‘本地文件地址’ ，是默认没有域名的，解析本地文件路径以后会是一个非常乱的字符串序列，上网可查。
解决方法：图片放置在服务器中，通过服务器返回给客户端，遵循同源策略

跨域处理部分

原本以为可以像加载图片一样简单，想不到使用getImageData()函数之后需要面对一个跨域的问题。（协议、端口、查找路径等一致就算是同源了）
比较简单的方式就是本地服务器加载，那样子就是同源的。前提是你没有改变数据的来源

var  express = require('express');
var app = express();
app.use(express.static(__dirname+'',{index:"paint.html"}));
app.listen(8080);

总共就4行代码，在node环境下安装express就可以啦。本人修改了默认的静态路径，你可以修改成自己想要的。
dirname+“文件路径”，{index:’'paint.html"}，index记得是默认名称，后面的html文件换称自己文件名称就可以了

今天又开始写博客了，之前的内容都是比较简单的。本人后续会继续编写图像的其他处理部分，后面继续编辑。

chonyhaha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas颜色提取器，解决跨域问题

canvas颜色提取器，解决跨域问题canvas颜色提取<style> #canvas{ border: 1px solid black; float: left; margin-right: 30px; } #hovered-color{ border: 1px solid black; width: 100px; height: 300px; float:
复制链接

扫一扫