Как вставить изображение в холст и после этого вставить текст в этот холст?

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

Теперь я хочу, чтобы пользователь вставлял перетаскиваемый текст в фактический холст. Люди говорят, что с помощью Fabric.js легко, но я не могу заставить его работать:

canvas = document.getElementById("canvasThumbResult"); 
var context = canvas.getContext("2d"); 
var img = document.getElementById("target"); 
context.drawImage(img, getX, getY, getWidth, getHeight, 0, 0, 238.11023622,332.598425197);

источник

2013-08-31 Francisco José Valero Berná

мы можем увидеть некоторый код, чтобы быть в состоянии помочь лучше? –

Вот как добавить указанный пользователем текст на изображении и чтобы текст тащиться

Enter image description here

Это решение использует библиотеку canvas KineticJS и jQuery для упрощения задачи.

Вот как это работает:

Создать кинетический этап (это активизирует HTML холст)
Создать новый объект изображения в JavaScript (это загружает изображение в объект)
Создать новый объект Kinetic Image и поместите новое изображение в объект Kinetic Image
Когда пользователь вводит текст на вход и нажимает кнопку «Добавить» ...
Создать новый объект Kinetic этикетки с помощью текста пользователя
Для того, чтобы новый текстовый ярлык перетаскиваемым, просто установите draggable:true при создании объекта

Вот код, который делает всю работу ...

Создать Кинетический этап (это активирует HTML холст)

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 300, 
    height: 300 
}); 
var layer = new Kinetic.Layer(); 
stage.add(layer);

Создать новый объект изображения в JavaSc НИИИТ (это загружает изображение в объект)

var image = new Image(); 
image.onload = function(){ 

     // Your image is fully loaded, so… 

     // Create your kinetic image object here 

    layer.add(image1); 
    layer.draw(); 
} 
image.src="koolaidman.png";

Создать новый кинетический объект изображения и поместить новое изображение в кинетическом объекте Image

var image = new Image(); 
image.onload = function(){ 
    var image1 = new Kinetic.Image({ 
     x: 0, 
     y: 0, 
     width: 300, 
     height: 300, 
     image: image, 
    }); 
    layer.add(image1); 
    layer.draw(); 
} 
image.src = "koolaidman.png";

Когда пользователь вводит текст в ввод и нажимает кнопку «Добавить» ...

<input id="newtext" type="text" value="Hello!"> 
<button id="addbutton">Add this text</button> 

$("#addbutton").click(function(){ 

    // Create your new kinetic text label here 

});

Создать новый объект Kinetic этикетки с помощью текста пользователя

$("#addbutton").click(function(){ 

     // Simple label 
     var label = new Kinetic.Label({ 
      x: 20, 
      y: 20, 
      draggable:true 
     }); 

     label.add(new Kinetic.Tag({ 
      fill: 'green' 
     })); 

     label.add(new Kinetic.Text({ 
      text: $("#newtext").val(), 
      fontFamily: 'Verdana', 
      fontSize: 18, 
      padding: 10, 
      fill: 'white' 
     })); 

     layer.add(label); 
     layer.draw(); 
});

Для того, чтобы новый текстовый ярлык перетаскиваемым, просто установите draggable:true при создании объекта

// Snipped from the kinetic label creation above 

var label = new Kinetic.Label({ 
    x: 20, 
    y: 20, 

    // Set draggable:true to make the kinetic label draggable 
    draggable:true 
});

Вы можете скачать Kinetic библиотеку и подробнее см. примеры в HTML5 Canvas KineticJS Label Tutorial. Вы можете загрузить библиотеку jQuery и узнать больше с примерами здесь, на странице jQuery home page. jQuery - отличная библиотека для устранения несоответствий между браузерами.

Вот код и Fiddle: http://jsfiddle.net/m1erickson/pQYz9/

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Prototype</title> 
     <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
     <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script> 
     <style> 
      #container{ 
       border:solid 1px #ccc; 
       margin-top: 10px; 
       width:300px; 
       height:300px; 
      } 
     </style> 
     <script> 
      $(function(){ 
       $("#addbutton").click(function(){ 
         // Simple label 
         var label = new Kinetic.Label({ 
          x: 20, 
          y: 20, 
          draggable:true 
         }); 

         label.add(new Kinetic.Tag({ 
          fill: 'green' 
         })); 

         label.add(new Kinetic.Text({ 
          text: $("#newtext").val(), 
          fontFamily: 'Verdana', 
          fontSize: 18, 
          padding: 10, 
          fill: 'white' 
         })); 

         layer.add(label); 
         layer.draw(); 
       }); 
      }); // End $(function(){}); 
     </script> 
    </head> 

    <body> 
     <input id="newtext" type="text" value="Hello!"> 
     <button id="addbutton">Add this text</button> 
     <div id="container"></div> 
    </body> 
</html>

источник

2013-08-31 15:11:58 markE

хороший !! большое спасибо!! –

HTML в конце не является [хорошо сформированным] (https://en.wikipedia.org/wiki/Well-formed_element) - нет никакого конца тега для ' '. Должно ли это ''? –

и теперь, если я хочу сохранить изображение, как это можно сделать? –

Использование каракулями.ЯШ:

(Отказ от ответственности: Я разработчик этой библиотеки)

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Scrawl.js</title> 
     <style> 
      body {margin: 1em;} 
      img {position: fixed; visibility: hidden;} 
     </style> 
    </head> 
    <body> 
     <ol> 
      <li>Display an image in a canvas</li> 
      <li>Add text to canvas</li> 
      <li>Drag text around canvas</li> 
      <li>Change text via an input box</li> 
     </ol> 
     <div>Change text by typing in this box: <input type="text" id="changetext" value="Hello world" /></div> 
     <img src="img/penguin02.jpg" id="penguin" class="demo903" /> 
     <canvas id="mycanvas" width="400" height="400"></canvas> 
     <script src="js/scrawl.js"></script> 
     <script> 
      window.onload = function(){ 

       //import the image and create a sprite to display it 
       scrawl.getImagesByClass('demo903'); 
       scrawl.newPicture({ 
        source: 'penguin', 
        width: 400, 
        height: 400, 
        }); 

       //construct a sprite to display the text 
       //and a group for collision detection stuff 
       var texts = scrawl.newGroup({ 
        name: 'texts', 
        }); 
       var displayText = scrawl.newPhrase({ 
        font: '24pt bold Arial, sans-serif', 
        textAlign: 'center', 
        textBaseline: 'middle', 
        startX: 200, 
        startY: 200, 
        fillStyle: 'yellow', 
        strokeStyle: 'black', 
        shadowColor: 'black', 
        shadowBlur: 8, 
        method: 'fillDraw', 
        text: 'Hello world', 
        group: 'texts', 
        }); 

       //add event listeners to handle text drag-and-drop 
       var here, myText; 
       var getText = function(){ 
        myText = texts.getSpriteAt(here); 
        if(myText){ 
         myText.pickupSprite(here); 
         } 
        }; 
       var dropText = function(){ 
        if(myText){ 
         myText.dropSprite(); 
         myText = false; 
         } 
        }; 
       scrawl.canvas.mycanvas.addEventListener('mousedown', getText); 
       scrawl.canvas.mycanvas.addEventListener('mouseup', dropText); 

       //add event listener for changing the text 
       var input = document.getElementById('changetext'); 
       var updateText = function(e){ 
        displayText.set({ 
         text: input.value, 
         }); 
        }; 
       input.addEventListener('keyup', updateText); 

       //build an animation loop for updating the canvas 
       var myPad = scrawl.pad.mycanvas; 
       var animate = function(){ 
        here = myPad.getMouse(); 
        //drop the text if mouse moves out of the canvas area 
        if(!here.active && myText){ 
         dropText(); 
         } 
        scrawl.render() 
        requestAnimFrame(function(){ 
         animate(); 
         }); 
        }; 
       //start animation 
       animate(); 
       }; 
     </script> 
    </body> 
</html>

Работа демо: over at jsFiddle

источник

2013-08-31 18:22:28 KaliedaRik

Как вставить изображение в холст и после этого вставить текст в этот холст?

ответ

Смежные вопросы