利用canvas的getImageData()方法制作《在线取色器》
2017-09-11 10:42
645 查看
1,取色器,首先就要有取色的对象,所以第一步我们需要制作前端的图片预览,我才用的方法是createObjectURL()获取图片的路径
获取图片路径方法
读取图片预览方法
3,用canvas绘制该图片
4000
位置,进行用getImageData()方法取色
转换十六进制方法
需要注意的是对当前位置的处理。
最终效果:
https://rattenking.github.io/demo/11/index.html
参考:
http://www.jiniannet.com/page/allcolor
demo下载地址:
http://download.csdn.net/download/m0_38082783/9972908
效果图:
获取图片路径方法
let getObjectURL = function(file){ let url = null ; if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } return url ; }
读取图片预览方法
let setFiles = function(e,areaId){ e = e || window.event; if (!window.File || !window.FileReader || !window.FileList || !window.Blob) { alert("很遗憾,您浏览器版本太老了,无法使用我们的小工具 !"); return; } if(e.files.length > 0)$(areaId).src = getObjectURL(e.files[0]); }2,图片预览成功后,需要给图片绑定点击事件,获取点击的位置
if (e["offsetX"]) { size.x = e.offsetX; size.y = e.offsetY; } else { let offset = img.getBoundingClientRect(); size.x = touch.clientX - offset.left; size.y = touch.clientY - offset.top; }
3,用canvas绘制该图片
//创建canvas let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); let newImg = new Image(); //当图片加载完的时候 canvas.width = newImg.width; canvas.height = newImg.height; ctx.drawImage(newImg, 0, 0);4,根据鼠标点击的
4000
位置,进行用getImageData()方法取色
//获取准确的在图片的位置 let x = newImg.width * size.x / imgWidth; let y = newImg.height * size.y / imhHeight; //获取(x,y,1,1)的像素数据对象 let imgData = ctx.getImageData(x, y, 1, 1); //通过imgData.data获取imgData对象中data的数据5,imgData.data获取的rgb数据如果需要,可以进行十六进制处理
转换十六进制方法
//十六进制转换器 let hexadecimal = function(num) { var r = parseInt(num).toString(16); if (r.length == 1) { return '0' + r; } return r.toUpperCase(); }
let color16 = '#'+ hexadecimal(imgData.data[0]) + hexadecimal(imgData.data[1]) + hexadecimal(imgData.data[2]); str1 = '<p><span style="background:'+ color16 +'"></span>'+ imgData.data.slice(0,3) +'</p>'; str = '<p><span style="background:'+ color16 +'"></span>'+ color16 +'</p>'; //在html中显示颜色和对应的颜色码 $(obj.area16).innerHTML = str; $(obj.areaRgba).innerHTML = str1;
需要注意的是对当前位置的处理。
最终效果:
https://rattenking.github.io/demo/11/index.html
参考:
http://www.jiniannet.com/page/allcolor
demo下载地址:
http://download.csdn.net/download/m0_38082783/9972908
效果图:
相关文章推荐
- 4.5.1_利用getImageData()与putImageData()方法来实现橡皮筋式选取框
- HTML5 canvas getImageData() 方法
- 4.5.1_利用getImageData()与putImageData()方法来实现橡皮筋式选取框_改良版
- 解决方法!:getImageData on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
- canvas图像滤镜---canvas getImageData() 方法
- "Unable to get image data from canvas because the canvas has been tainted by cross-origin data"问题产生原
- "Unable to get image data from canvas because the canvas has been tainted by cross-origin data"问题产生原因及解决办法
- canvas 利用getImageData与putImageData将一个canvas 内的图片展示在另一个canvas里
- canvas putImageData() 方法和drawImage()方法
- Canvas get/putImageData
- canvas 从getImageData()跨域问题到同源策略再到node.js搭建本地服务器
- asp.net get App_Data 目录几种方法 path
- 利用OleDb的GetOLEDBSchemaTable方法得到数据库架构信息
- html5 canvas报TypeError: imageData is undefined
- winform利用ImageList控件和ListView控件组合制作图片文件浏览器
- springMvc 完美解决 multipart/form-data 方式提交请求 在 Filter 中 ServletRequest.getParameter方法 获取不到参数的问题
- Canvas与Image互相转换示例以及利用该技术实现微信长按自动识别二维码功能
- 解决当FORM的ENCTYPE="multipart/form-data" 时request.getParameter()获取不到值的方法
- ERROR: the user data image is used by another emulator. aborting错误解决方法
- canvas保存为data:image扩展功能的实现