本文介绍了使用CSS3或JS覆盖可见区域的透明黑色剪影PNG与模式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在寻找一种方式来覆盖一个透明的黑色剪影PNG文件与某种模式的可见区域。



是否有CSS,JavaScript混合解决方案?



示例:



演示:在Photoshop中,选择图层蒙版>叠加时,同样的结果是givin。 p>

Ps:我的问题类似于这个线程:剪切PNG图片。这使用canvas与globalCompositeOperation设置为destination-in。例如

  var canvas = document.createElement('canvas'); 
canvas.width = 250;
canvas.height = 250;

var canvas_context = canvas.getContext(2d);

var img = new Image();
img.onload = function(){
var msk = new Image();
msk.onload = function(){
canvas_context.drawImage(img,0,0);
canvas_context.globalCompositeOperation =destination-in;
canvas_context.drawImage(msk,0,0);
canvas_context.globalCompositeOperation =source-over;
};

msk.src ='silhouette.png';
}
img.src ='pattern.jpg';

document.body.appendChild(canvas);


I'm looking for a way to overlay the visible areas of a transparent black silhouette PNG file with a certain pattern.

Is there a CSS, JavaScript, mixed solution for this?

Example: I have one image of a weapon silhoutte and a set of camo patterns which I want to lay over the weapon.

Demo: In Photoshop the same result is givin when selecting layer mask > overlay.

Ps: my question is similar to this thread: Silhouette a PNG image using CSS except I am looking for the exact opposite.

解决方案

You can do this using canvas with globalCompositeOperation set to destination-in. For example

var canvas = document.createElement('canvas');
canvas.width = 250;
canvas.height = 250;

var canvas_context = canvas.getContext("2d");

var img = new Image();
img.onload = function(){
    var msk = new Image();
    msk.onload = function(){
        canvas_context.drawImage(img, 0, 0);
        canvas_context.globalCompositeOperation = "destination-in";
        canvas_context.drawImage(msk, 0, 0);
        canvas_context.globalCompositeOperation = "source-over";
    };

    msk.src = 'silhouette.png';
}
img.src = 'pattern.jpg';

document.body.appendChild(canvas);

这篇关于使用CSS3或JS覆盖可见区域的透明黑色剪影PNG与模式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-30 05:10