html5如何修改画布颜色,使用Html5画布更改部分区域上的图像颜色(Change color of image on partial areas with out using Html5 canv...

使用Html5画布更改部分区域上的图像颜色(Change color of image on partial areas with out using Html5 canvas)

我们可以使用Html5画布改变部分区域上的图像颜色(例如：将图像中人物的手颜色改为红色)

Can we change color of image on partial areas(eg: change the hand color of a person in an image to red) with out using Html5 canvas

原文：https://stackoverflow.com/questions/19795067

更新时间：2020-01-05 01:54

最满意答案

拍摄一张照片。在photoshop的帮助下，用红手制作另一张图片(通过在该区域放置颜色)。

并做一些类似的事情

HTML：

CSS：

#Library {

background-image: url('http://www.hdwallpapers3d.com/wp-content/uploads/priyanka-chopra-image.jpg');

height: 70px;

width: 120px;

}

#Library:hover {

background-image: url('http://www.bubblews.com/assets/images/news/101694940_1380487096.jpg');

}

您可以根据需要设置高度和宽度。

Take an image.And with help of photoshop make another image with red hand(By putting color in that area).

And Do something like

HTML :

CSS :

#Library {

background-image: url('http://www.hdwallpapers3d.com/wp-content/uploads/priyanka-chopra-image.jpg');

height: 70px;

width: 120px;

}

#Library:hover {

background-image: url('http://www.bubblews.com/assets/images/news/101694940_1380487096.jpg');

}

You can set height and width whatever you want.

相关问答

您对cakeSide ， cakeSideVert ， cakeTopHalf1和cakeTopHalf2都指向相同的上下文对象。 所以当你调用stroke()它只会绘制最后绘制的形状( cakeTopHalf2 )。 您应该在函数中转换这些变量： $('.btn-bg').each(function () {

$(this).css("background", $(this).data('bg-color'));

});

var cakeCanvas =

...

如果你想画一个黑色的透明笔画，你可能想要： context.globalCompositeOperation = "destination-out";

context.strokeStyle = "rgba(0,0,0,1)";

记住保存以前的globalCompositeOperation，然后再恢复，否则透明度将无法正常工作！ If you want to draw a black transparent stroke, you probably want: context.globalCo

...

我假设你的意思是将图像加载到画布中，而不是从画布中上传图像。 阅读他们在这里的所有画布文章可能是一个好主意https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images 但基本上你想要做的是在javascript中创建一个图像，并将image.src =设置为任何文件位置。 在从用户那里加载图像的情况下，您将要使用File System API。 这里总结一个简单的例子： http : //j

...

由于您的问题是缩小您的图像，所以谈论插值(关于创建像素)是没有意义的。 这里的问题是下采样。 要对图像进行缩减，我们需要将原始图像中的每个p * p个像素的像素转换为目标图像中的单个像素。 为了表现原因浏览器做一个非常简单的下采样：要构建较小的图像，它们将仅在源中选择一个像素，并将其值用于目的地。 这些“忘记”一些细节并增加了噪音。 然而有一个例外：由于2X图像下采样是非常简单的(平均4像素做一个)，并用于视网膜/ HiDPI像素，这种情况下可以正确处理 - 浏览器使用4像素一-。 但是，如果您多

...

要为您的图像启用CORS(跨源资源共享)，请使用图像响应传递HTTP标头： Access-Control-Allow-Origin：* 如果您无法在映像服务器上更改它，请将该映像复制到您的某个服务器。 如果服务器支持JSONP，您也可以使用它。 To enable CORS (Cross-Origin Resource Sharing) for your images pass the HTTP header with the image response: Access-Control-Allo

...

是的，它可以完成，并不是太困难。 在此处查看我的答案： 如何使用渐变贴图在画布中调整带有图像的HTML5画布。 就像在着色中一样，只需要遍历每个像素并将RGB值更改为更小(步长为8或16，而不是步长为1) 所以你可以做8个步骤： redValue = redValue - (redValue % 32) // 155 would become 128, etc

哪个应该工作，但你应该检查边缘情况。 例： http://jsfiddle.net/gbBz7/ Yes it can be done,

...

请记住，下载img需要一些时间。 在下载期间，Javascript不会停止(！)。 相反，JS将继续执行以下任何代码。 这会导致您意想不到的问题。 因此，只需在应用程序启动时下载img一次 。 这样你的drawImage将按照你期望的顺序完成，因为下载图像时没有延迟。 Keep in mind that downloading the img will take some time. During that downloading time, Javascript does not stop(!)

...

你试过getImageData吗？ 要获取包含画布上下文的像素数据副本的ImageData对象，可以使用getImageData()方法： var myImageData = ctx.getImageData(left, top, width, height); 此方法返回一个ImageData对象，表示画布区域的像素数据，其角由点(左，上)，(左，上，上)，(左，上+高)和(左+宽)表示。 ，顶部+高度)。 坐标在画布坐标空间单位中指定。 https://developer.mozilla.or

...

拍摄一张照片。在photoshop的帮助下，用红手制作另一张图片(通过在该区域放置颜色)。 并做一些类似的事情 HTML：

CSS： #Library {

background-image: url('http://www.hdwallpapers3d.com/wp-content/uploads/priyanka-chopra-image.jpg');

height: 70px;

width: 120px;

}

#Library:hover

...

globalCompositeOperation是你的朋友。 基本上，您绘制叠加层，然后将gCO设置为'source-atop'复合模式，这将使您将来的所有绘图仅停留在已绘制不透明像素的位置，因此重叠部分具有透明部分非常重要。 因此，您只需填充所需命令的矩形，最后绘制原始图像，或者在我们刚刚创建的新形状后面混合。 var ctx = canvas.getContext('2d');

var loaded = 0;

function onload(){

if(++loaded === 2

...