Fatal编程技术网
  • jquery/
  • Jquery HTML5画布颜色2个PNG，相互覆盖，形成动态url

Jquery HTML5画布颜色2个PNG，相互覆盖，形成动态url

jquery html dynamic input html5-canvas

Jquery HTML5画布颜色2个PNG，相互覆盖，形成动态url,jquery,html,dynamic,input,html5-canvas,Jquery,Html,Dynamic,Input,Html5 Canvas,提前谢谢你的帮助 我正在尝试创建一个由两个png组成的图像。1.将是一个基础，如手镯和2。那将是一块石头。用户将有两个输入字段或预先确定的单选按钮来更改石材和贱金属的颜色。完成后，将创建一个动态url用于共享图像 作为参考，在一个输入字段更改了一个png的颜色时，请使用前面的帖子： 我想两个这样做两次，然后有两个图像合并两个一每次输入更新 再次感谢 您是否尝试过使用DrawImage（）将两个图像重叠绘制，第二个图像是透明的 关于这个问题有一个例子：@Mark Redman的想法当然是正确的：

提前谢谢你的帮助

我正在尝试创建一个由两个png组成的图像。1.将是一个基础，如手镯和2。那将是一块石头。用户将有两个输入字段或预先确定的单选按钮来更改石材和贱金属的颜色。完成后，将创建一个动态url用于共享图像

作为参考，在一个输入字段更改了一个png的颜色时，请使用前面的帖子：

我想两个这样做两次，然后有两个图像合并两个一每次输入更新

再次感谢

您是否尝试过使用
DrawImage（）
将两个图像重叠绘制，第二个图像是透明的

关于这个问题有一个例子：

@Mark Redman的想法当然是正确的：

在你的金属背景上画一块透明的宝石

这就是gem图像的外观：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
    button{display:none;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // image loader

    var imageURLs=[];  // put the paths to your images here
    var imagesOK=0;
    var imgs=[];
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/pendant.jpg");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/purpleCZ.png");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/pinkCZ.png");
    loadAllImages();

    function loadAllImages(callback){
        for (var i=0; i<imageURLs.length; i++) {
            var img = new Image();
            imgs.push(img);
            img.onload = function(){ 
                imagesOK++; 
                if (imagesOK>=imageURLs.length ) {
                    $("button").show();
                }
            };
            img.onerror=function(){alert("image load failed:"+this.src);} 
            img.crossOrigin="anonymous";
            img.src = imageURLs[i];
        }      
    }


    $("#purple").click(function(){
        draw(1);
    });

    $("#pink").click(function(){
        draw(2);
    });

    function draw(index){
        var stone=imgs[index];
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(imgs[0],0,0,800,800,0,0,300,300);
        ctx.drawImage(stone,0,0,stone.width,stone.height,108,134,stone.width*1.24,stone.height*1.24);
    }

}); // end $(function(){});
</script>

</head>

<body>
    <button id="purple">Purple</button>
    <button id="pink">Pink</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

在吊坠设置顶部绘制的客户选择宝石演示：

用户选择宝石后，可以将画布保存为.png图像url，如下所示：

var pngURL = canvas.toDataURL();
代码可能是这样的：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
    button{display:none;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // image loader

    var imageURLs=[];  // put the paths to your images here
    var imagesOK=0;
    var imgs=[];
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/pendant.jpg");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/purpleCZ.png");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/pinkCZ.png");
    loadAllImages();

    function loadAllImages(callback){
        for (var i=0; i<imageURLs.length; i++) {
            var img = new Image();
            imgs.push(img);
            img.onload = function(){ 
                imagesOK++; 
                if (imagesOK>=imageURLs.length ) {
                    $("button").show();
                }
            };
            img.onerror=function(){alert("image load failed:"+this.src);} 
            img.crossOrigin="anonymous";
            img.src = imageURLs[i];
        }      
    }


    $("#purple").click(function(){
        draw(1);
    });

    $("#pink").click(function(){
        draw(2);
    });

    function draw(index){
        var stone=imgs[index];
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(imgs[0],0,0,800,800,0,0,300,300);
        ctx.drawImage(stone,0,0,stone.width,stone.height,108,134,stone.width*1.24,stone.height*1.24);
    }

}); // end $(function(){});
</script>

</head>

<body>
    <button id="purple">Purple</button>
    <button id="pink">Pink</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>


正文{背景色：象牙；}
#画布{边框：1px纯红；}
按钮{显示：无；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//图像加载器
var imageURLs=[]；//将图像的路径放在此处
var-imagesOK=0；
var-imgs=[]；
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/stack1/pendant.jpg");
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/stack1/purpleCZ.png");
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/stack1/pinkCZ.png");
加载图像（）；
函数LoadAllImage（回调）{
for（var i=0；i=imageURL.length）{
$（“按钮”）.show（）；
}
};
img.onerror=function（）{alert（“映像加载失败：“+this.src”）；}
img.crossOrigin=“匿名”；
img.src=imageURL[i]；
}      
}
$（“#紫色”）。单击（函数（）{
抽签（1）；
});
$（“#粉红色”）。单击（函数（）{
抽签（2）；
});
功能图（索引）{
var stone=imgs[指数]；
clearRect（0,0，canvas.width，canvas.height）；
ctx.drawImage（imgs[0]，0,080080,0,0300）；
ctx.drawImage（石头，0,0，石头。宽度，石头。高度，108134，石头。宽度*1.24，石头。高度*1.24）；
}
}); // end$（函数（）{}）；
紫色
粉红色
jsfiddle将在回答中帮助演示一个工作示例。再次感谢。这是想法所在的基本js（用户不会看到前两张图片，他们只会有两个输入并看到最终产品）：感谢您的回复。我看到了DrawImage示例，但我不确定它到底是如何工作的，因为我正在尝试使其动态化，并使用高质量的png并维护它们。如果要使用画布，请使用DrawImage绘制背景，然后再次使用DrawImage绘制前景（根据用户输入或选择的一幅或多幅图像进行更新）？如果前景图像是透明的，它会根据需要合并图像吗？要共享图像，您可能还需要从url中读取默认值。