canvas把图片变黑白并保存

最新推荐文章于 2023-08-01 10:54:17 发布
最新推荐文章于 2023-08-01 10:54:17 发布
阅读量1.3k 收藏
点赞数
分类专栏： js canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daily886/article/details/79035697
版权
js 同时被 2 个专栏收录
38 篇文章 0 订阅
订阅专栏
canvas
2 篇文章 0 订阅
订阅专栏
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="canvas" style="width:500px;height:500px;position:relative;margin:0 auto;"></div>
</body>
</html>
<script>
var jquery = (function($){
var $ = function(id){
return document.getElementById(id) || id;
}
return $;
}());


var color = (function($){
var extend = function(target,source){
for(var x in source){
if(x in target){
target[x] = source[x];
}
}
return target;
}


var addEvent = function(obj,event,func){
obj.addEventListenter ? obj.addEventListenter(event,func) : obj.attachEvent("on"+event,function(){func.call(obj)});
}


window.requestAnimation = function(){
return  window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(fn){
return window.setTimeout(fn,1000/60);
}
}

/**
         * 获取mimeType
         * @param  {String} type the old mime-type
         * @return the new mime-type
         */
        var _fixType = function(type) {  //获取图片的mime类型
            type = type.toLowerCase().replace(/jpg/i, 'jpeg');
            var r = type.match(/png|jpeg|bmp|gif/)[0];
            return 'image/' + r;
        };


/**
         * 在本地进行文件保存
         * @param  {String} data     要保存到本地的图片base64数据
         * @param  {String} filename 文件名
         */
        var saveFile = function(data, filename){
            var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            save_link.href = data;
            save_link.download = filename;
           
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
        };


var init = function(opt){
this.option = {
element : null
}


extend(this.option,opt);
this.initialize();
}


init.prototype = {
initialize : function(){
this.canvas = this.createCanvas();
this.ctx = this.canvas.getContext("2d");
this.turnColor();
},


turnColor : function(){
var image = new Image(),_this = this;
image.src = "./1.jpg";
image.onload = function(){
$(_this.option.element).style.width = parseInt(image.width)+"px";
                    $(_this.option.element).style.height = parseInt(image.height)+"px";
_this.canvas.width = parseInt(image.width);
_this.canvas.height = parseInt(image.height);
_this.ctx.drawImage(image,0,0);
var imageData = _this.ctx.getImageData(0,0,image.width,image.height);


for(var i = 0,imageDataLeng = imageData.data.length;i < imageDataLeng;i += 4){
// First bytes are red bytes.        
// Get red value.
var myRed = imageData.data[i];


// Second bytes are green bytes.
// Get green value.
var myGreen = imageData.data[i + 1];


// Third bytes are blue bytes.
// Get blue value.
var myBlue = imageData.data[i + 2];


// Fourth bytes are alpha bytes
// We don't care about alpha here.
// Add the three values and divide by three.
// Make it an integer.
myGray = parseInt((myRed + myGreen + myBlue) / 3);


// Assign average to red, green, and blue.
imageData.data[i] = myGray;
imageData.data[i + 1] = myGray;
imageData.data[i + 2] = myGray;


}
_this.ctx.putImageData(imageData,0,0);


// 图片导出为 png 格式
var type = 'png';
var imgData = _this.canvas.toDataURL(type);  //获取canvas的图片base64数据


// 加工image data，替换mime type
imgData = imgData.replace(_fixType(type),'image/octet-stream');


// 下载后的问题名
var filename = '1.' + type;
// download
saveFile(imgData,filename);
}
},


createCanvas : function(){
var canvas = document.createElement("CANVAS");
canvas.innerHTML = "canvas";
canvas.width = parseInt($(this.option.element).style.width);
canvas.height = parseInt($(this.option.element).style.height);
$(this.option.element).appendChild(canvas);
return canvas;
}
}


return init;
}(jquery || {}));


window.onload = function(){
var option = {
element : "canvas"
}
new color(option);
}
</script>
daily886
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通过画布canvas实现图片黑白化
wkc1203的博客
04-09 971
图片是由一个个的像素点组成的，而每一个像素点都是由三原色（red,green,blue）加透明度(alpha)来组成。所以说如果我们希望改变图像的图像数据，其实就是改变图像每一个像素点的数据。 首先创建canvas对象，canvas对象提供了 2D、3D两种绘图方式，这里我们使用2D绘图 使用 context2d = drawing.getContext('2d'); 方法获得contex...
canvas实现图像黑白
u011539729的博客
12-04 1106
还是这个美女,长这样 然后进行一个黑白操作 一幅泼墨画恒然而生。黑白说白了就是非黑即白。那哪个变成黑,哪个变成白呢?我们知道黑和白的分界是灰，灰可以当成一半黑一半白，在色值表示就是256 / 2 = 128，记住这个128，我们要把像素的所有通道根据灰度的权平均法得出平均值,如结果大于等于128，就把所有通道取白(255)，否则所有通道取黑(0)。这样就很清晰了 1.获取画布上图像的像素信息 ...
用canvas把图片变成黑白相片
aemjon0915的博客
11-15 170
<!--这里没有代码--> 原来是把灰度系数分别 乘以 每个像素点的三个像素色(R,G,B)的值，然后得到的三个值加起来，再把得到的值赋值进去给每个R ，G，B。 微软的MSDN上提到的是 ，将每个R,G,B的值提取出来相加，再除以3；得到的就是灰度，然后将灰度赋值给每个R, G, B. 链接地址 https://msdn.microsoft.com/zh-cn/...
canvas渲染网络图片(旋转，灰阶，饱和度操作)并保存到本地
是一座岛
04-02 2323
1.问题：canvas渲染项目中的图片，可以保存到本地，但是渲染网络图片，保存本地失败，存在跨域问题？解决方法：在给img标签添加一个属性，支持跨域，img.crossOrigin='Anonymous'。2.问题：canvas渲染图片怎么保存到本地呢？解决方法：可将canvas图像导出为多种格式图片的jQuery插件 3.问题：canvas旋转问题？ $scope.canvasRotate = ...
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
12-11
本文实例讲述了JavaScript+Canvas实现彩色图片转换成黑白图片的方法。分享给大家供大家参考，具体如下： 1、convertToGray() 在主体代码中使用 canvas 元素的id来获取画布，并设置画布的宽和高为图片的宽和高，再将上下文初始化为2d画布；彩色图片加载完成后，使用 drawImage() 将图片加载到上下文，调用用于完成剩余绘制工作的 getColorData()和 putColorData()；最后为myImage指定彩色图片的路径。 2、getColorData() 使用 getImageData()将图像复制到 myImage，然后按照以下方式处理图像：在图像
Canvas图片处理之黑白、反向（附演示及源码）
xrkffgg前端
12-16 530
1 前 言 1.1 预览图 2 实 现 本例使用： Vue element-ui 2.1 画 图 <!--canvas 定义--> <canvas id="canvas01" width="400" height="400"></canvas> // vue 生命周期 mounted(){ this.drawCanvas() }, drawC...
java canvas 打开图片_一步步教你利用Canvas对图片进行处理
weixin_34023576的博客
02-27 955
前言Canvas，中文译为“画布”，HTML5中新增了元素，可以结合JavaScript动态地在画布中绘制图形。今天，我们不讲Canvas的图形绘制，而是讲如何对图片进行处理，话不多说了，来一起看看详细的介绍吧。大概流程非常简单，主要分为以下三个步骤：Canvas图片处理是的，就像把大象装进冰箱一样简单，哈哈。一、主要API整个流程中所用到的主要Canvas API有：绘制图像： drawImag...
Delphi图片去色，彩色变黑白.rar
07-10
在这个"Delphi图片去色，彩色变黑白"的例子中，我们将看到如何利用Delphi的VCL（Visual Component Library）框架中的TImage控件和其他图形处理函数来实现这一功能。 首先，我们需要理解图像的基本概念。图片通常由...
使用canvas给图片增加滤镜
翾的博客
04-26 1916
类似操作像素的博主还写过一篇文章：原生JavaScript + Canvas实现图片局部放大器 1. 效果图 2. 实现原理 滤镜效果主要使用的均为canvas的getImageData以及putImageData。 （以上两个api详细介绍可以点击蓝色链接，跳转到MDN查看） 操纵getImageData函数返回的ImageData图片的像素信息来给图片增加滤镜效果。 2.1 负片滤镜 负片滤...
Android中将Bitmap转换成单色的Bmp图片
10-16
Android不支持将Bitmap转换成单色的Bmp图片，所以参考Bmp格式说明，自己写了一个转换类。亲测有效！！！
基于HTML5 Canvas实现黑白滤镜
JiangKan的专栏
11-30 2876
getImageData 和 putImageData 是 HTML5  Canvas两个比较常用的两个 API，通过这两个API可以很方便的实现黑白滤镜效果。
微信小程序实现黑白化
shi450561200的博客
12-05 1924
像在清明节，经常来看到有很多网站或者App还有小程序，界面显示黑白化，那么原理是怎么实现的呢，对于不同平台可能会有区别，但是原理都差不多，几行代码就可实现，原理都是给页面加上一层灰色滤镜。效果. 1、网页实现方式 第一种：修改CSS文件 我们可以在网页的CSS文件中添加以下的CSS代码，来实现网页黑白色，也就是网站变灰 第二种 网页标签 或者 2、微信小程序实现方式 如果是使用微信小程序原生开发，直接在css 加上以下样式即可实现。 filter: gra
canvas 实现图片黑白功能
最新发布
DejaVus的博客
08-01 424
canvas 图片黑白
html2canvas php,javascript-html2canvas返回黑色图像
weixin_28949049的博客
04-05 488
我在通过html2canvas将div渲染为图像时遇到问题.function saveImages(i){html2canvas($("#page"+i), {logging:true,onrendered: function(canvas){var url = canvas.toDataURL();$.post("saveImage.php", {"path": url, "index":i},...
jq html转为图片,使用jquery将彩色图片转换为黑白图片
weixin_28718487的博客
05-31 564
随着技术的发展，在网页中将一张彩色图片转换为黑白图片已经不是什么难事了。有很多种方法可以达到这种图片转换的效果，包括使用CSS3滤镜，HTML5 Canvas和jquery插件等。使用jquery插件可以非常轻松的完成彩色图片到黑白图片的转换，在介绍jquery插件之前，我们先来看看CSS3和HTML5 Canvas的方法。使用CSS3 filterCSS3支持很多种滤镜，通过CSS3滤镜，我们可...
JavaScript实现彩色图片变黑白
weixin_59246157的博客
04-07 704
这段代码将彩色图片转换为黑白图片的原理是将每个像素点的RGB值取平均值，得到灰度值，再将RGB值修改为灰度值，从而实现黑白化。// 遍历像素点，将彩色像素点转换为黑白像素点。// 将处理后的数据重新绘制到canvas上。// 将canvas转换为黑白图片。// 获取canvas上下文对象。// 将图片绘制到canvas上。// 创建canvas对象。
【canvas】导出图片背景色
xilejie的博客
06-09 2819
一般是透明底或者黑色，想要白色背景的图片。 var imageData = ctx.getImageData( 0,0,w,h); for (var i = 0; i < imageData.data.length; i += 4) { // 当该像素是透明的，则设置成白色 if (imageData.data[i + 3] == 0) { imageData.data[i] = 255; imageData.data[i + 1] = 255;
canvas标签导出图片时，设置图片背景为白色
qq_27453315的博客
06-01 2616
业务需求：利用canvas标签签名，导出成图片；因为png格式的图片背景透明的，所以需要将背景图片设置为白色。可以寻找图片中透明的pixel，将其变为白色的。转载于:https://www.cnblogs.com/qinmengjiao123-123/p/10300623.html。
vue3 中 利用canvas裁剪图片并保存
06-11
在 Vue3 中，可以使用以下步骤利用 Canvas 裁剪图片并保存： 1. 在 Vue3 中，可以使用 `ref` 或 `setup()` 中的 `refs` 来获取 `<canvas>` 元素的引用。 ```html <template> <div> <canvas ref="canvas"></canvas> <input type="file" accept="image/*" @change="onFileChange"> <button @click="cropImage">Crop Image</button> </div> </template> ``` ```javascript import { ref } from 'vue'; export default { setup() { const canvasRef = ref(null); return { canvasRef, }; }, }; ``` 2. 在 `onFileChange` 方法中获取上传的图片，并将其绘制到 `<canvas>` 中。 ```javascript async function onFileChange(event) { const file = event.target.files[0]; const image = new Image(); image.onload = () => { canvasRef.value.width = image.width; canvasRef.value.height = image.height; const context = canvasRef.value.getContext('2d'); context.drawImage(image, 0, 0); }; image.src = URL.createObjectURL(file); } ``` 3. 在 `cropImage` 方法中获取裁剪后的图片，并将其保存。 ```javascript async function cropImage() { const context = canvasRef.value.getContext('2d'); const imageData = context.getImageData(0, 0, canvasRef.value.width, canvasRef.value.height); const data = imageData.data; // 获取裁剪后的图片数据 const croppedImageData = context.getImageData(x, y, width, height); const croppedData = croppedImageData.data; // 将裁剪后的图片绘制到新的 Canvas 中 const newCanvas = document.createElement('canvas'); newCanvas.width = width; newCanvas.height = height; const newContext = newCanvas.getContext('2d'); newContext.putImageData(croppedImageData, 0, 0); // 将新的 Canvas 转换为图片，并保存 const newImage = new Image(); newImage.src = newCanvas.toDataURL('image/png'); document.body.appendChild(newImage); } ``` 在以上代码中，`x`、`y`、`width`、`height` 分别表示裁剪区域的左上角坐标和宽高。裁剪后的图片数据可以使用 `getImageData()` 方法获取，然后再将其绘制到新的 Canvas 中，最后将新的 Canvas 转换为图片，并保存。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值