html中图片为什么反了,HTML5 canvas如何实现图片反色

本篇教程探讨了HTML5 canvas如何实现图片反色，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

html>

无标题文档

window.onload = function ()

{

var oc = document.getElementById(‘c1‘);

var ogc = oc.getContext(‘2d‘);

var yimg = new Image();

yimg.onload = function ()

{

draw(this);

}

yimg.src = ‘img/5-5.jpg‘;

function draw(obj)

{

oc.width = obj.width;

oc.height = obj.height*2;

ogc.drawImage(obj,0,0);

var oimg = ogc.getImageData(0,0,obj.width,obj.height);

var w = oimg.width;

var h = oimg.height;

for(var i = 0; i

{

for(var j = 0; j

{

var color = getXY(oimg,j,i)

var result = [];

result[0] = 255 - color[0];

result[1] = 255 - color[1];

result[2] = 255 - color[2];

result[3] = 255;

setXY(oimg,j,i,result);

}

ogc.putImageData(oimg,0,obj.height);

}

function getXY(obj,x,y)

{

var w = obj.width;

var h = obj.height;

var d = obj.data;

var color = [];

color[0] = d[ 4*(y*w+x)];

color[1] = d[ 4*(y*w+x) +1];

color[2] = d[ 4*(y*w+x) +2];

color[3] = d[ 4*(y*w+x) +3];

return color;

}

function setXY(obj,x,y,color)

{

var w = obj.width;

var h = obj.height;

var d = obj.data;

d[ 4*(y*w+x)] = color[0];

d[ 4*(y*w+x) +1] = color[1];

d[ 4*(y*w+x) +2] = color[2];

d[ 4*(y*w+x) +3] = color[3];

}

body{

background:pink;

}

#c1{

background:white;

}

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！

html中图片为什么反了,HTML5 canvas如何实现图片反色相关推荐

html5canvas绘制图片源码,HTML5 CANVAS：绘制图片
HTML5 CANVAS:绘制图片通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素 ...
nodejs html 生成图片,使用nodejs将html5 canvas base64编码图片保存为文件
目前流行的"你画我猜"应用,你有没有想过使用HTML5来实现过?那么不可避免的需要解决canvas保存图片到硬盘或mongodb之类的数据库.本文主要介绍使用nodejs将html ...
html5 canvas 加载图片
html5 canvas 加载图片视频 https://www.bilibili.com/video/BV19E411G7Vj?p=30 https://www.bilibili.com/video ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
java canvas 缩放图片_详解如何用HTML5 Canvas API控制图片的缩放变换
摘要:这篇HTML5栏目下的"详解如何用HTML5 Canvas API控制图片的缩放变换",介绍的技术点是"html5_canvas.canvas.Html5.控制图片 ...
如何消除图片锯齿 html,Html5 canvas drawImage图片抗锯齿
Html5 canvas drawImage图片抗锯齿2018-01-26 11:17 虽然drawImage会自动应用消除锯齿,但如果是从大尺寸变为小尺寸,某些图像就不尽人意了,比如曲线. 对于可能 ...
前端html生成图片,HTML5 Canvas：绘制图片
通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素类型: HTMLImageEleme ...
html 图片剪裁压缩,HTML5 canvas实现图片拉伸、压缩与裁剪
前言: 我们在网页中经常会用到图片展示,通常情况下会给一个固定的宽高来显示这个图片,然而从服务器端上传的图片大小是不确定的,如果直接按默认填充这个框有时候就会特别丑orz.作为一个完(wai)美(ma ...
html canvas保存为图片,在HTML5 Canvas中放入图片和保存为图片的方法
第一种方式如果是使用的图片的话,就会涉及到canvas的图片跨域问题,因为canvas是禁止跨域的,如果图像来自其他域,调用toDataURL()会抛出一个错误需要添加"img.cros ...
html5 图片文字提取,HTML5 Canvas：获取canvas内容-toDataURL()
我们可以通过canvas的toDataURL()方法来获取绘制在HTML5 canvas中的内容.做法类似下面的示例代码: var canvas = document.getElementById(& ...

html中图片为什么反了,HTML5 canvas如何实现图片反色

html中图片为什么反了,HTML5 canvas如何实现图片反色相关推荐

最新文章

热门文章