HTML5 Canvas color 2 png, которые накладываются друг на друга и образуют динамический URL

0

Спасибо за помощь заранее.

Я пытаюсь создать образ, состоящий из двух png. 1. Был бы базой, такой как браслет и 2. Был бы камень. Пользователь будет иметь два поля ввода или предварительно определенные переключатели, чтобы изменить цвет камня и основного металла. После этого будет создан динамический URL-адрес для совместного использования изображения.

Для справки используйте предыдущие сообщения, ответьте, где одно поле ввода изменило цвет одного png: Как изменить цвет изображения с помощью jquery

Я бы хотел, чтобы два раза это делали дважды, а затем два изображения сливались два раза каждый раз, когда ввод обновляется.

Еще раз спасибо!

  • 0
    Jsfiddle будет признателен в ответах, чтобы помочь продемонстрировать рабочий пример. Еще раз спасибо.
  • 0
    Это базовая информация о том, где находится идея (пользователь не увидит первые два изображения, он просто получит два ввода и увидит конечный продукт): jsfiddle.net/jessrichman/8wg8e/#&togetherjs=b4CeLxOvvG
Теги:
dynamic
input
html5-canvas

2 ответа

0

@Mark Redman, безусловно, имеет правильную идею:

Нарисуйте драгоценный камень с прозрачным фоном над вашей металлической сетью.

Это то, на что могут выглядеть изображения драгоценных камней:

Изображение 174551Изображение 174551

Демонстрация выбранных клиентом драгоценных камней, нарисованных поверх подвески: http://jsfiddle.net/m1erickson/U8Z2g/

Изображение 174551Изображение 174551

После того, как пользователь выбрал свой драгоценный камень, вы можете сохранить холст в URL-адресе.png, например:

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>
Поделиться
0

Попробовали ли вы рисовать два изображения друг над другом с помощью DrawImage() второго с прозрачностью?

В этом вопросе есть пример: Рисование PNG для элемента canvas - отсутствие прозрачности

Поделиться
  • 0
    ценим ответ. Я видел пример DrawImage, однако я не уверен, как именно это будет работать, поскольку я пытаюсь сделать его динамичным, использовать высококачественные png и поддерживать их.
  • 0
    Если вы хотите использовать холст, используйте DrawImage, чтобы нарисовать фон, а затем снова используйте DrawImage, чтобы нарисовать передний план (обновляется на основе пользовательского ввода или выбора не более или нескольких изображений)? если изображение на переднем плане прозрачное, оно будет объединять изображения по мере необходимости? Чтобы поделиться изображением, вам может потребоваться также прочитать значения по умолчанию из URL.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню