Добавить изображение с пользовательского компьютера на холст

Я работаю над веб-приложением, которое позволяет пользователям создавать динамические слайд-шоу. В настоящее время у меня есть проблема, независимо от того, как добавить изображение от пользователя компьютера на холст. Я использую кнопку ввода, чтобы получить файл с компьютера, и он обращается к функции, которая добавит изображение на холст.

До сих пор я пробовал разные способы добавления изображения на холст, а также этот: Динамически добавить изображение на холст

Но код, показанный здесь, не работает в моем случае, потому что он просто рисует изображение на холсте, но не позволяет перетаскивать его и изменять его размер, как в демо-версии Kitchensink.js от Fabricsjs.

Я также пытался преобразовать изображение в Base64 и использовать LoadJSON, чтобы преобразовать его обратно, но я столкнулся с этой ошибкой:

Uncaught TypeError: Cannot read property 'length' of undefined fabric.js:2089
enlivenObjects fabric.js:2089
fabric.util.object.extend._enlivenObjects fabric.js:9025
fabric.util.object.extend.loadFromJSON fabric.js:8953
sub

Sub ссылается на функцию, которую я вызвал для добавления изображения.

Я также пробовал этот код:

document.getElementById('imgLoader').onchange = function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new fabric.Image();
img.onload = function(){
img.set({
    left : 250,
    top : 250,
    angle : 20,
      padding: 10,
      cornersize: 10
    });
    image.scale(getRandomNum(0.1, 0.25)).setCoords();
    canvas.add(image);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}

Которые ловят эти ошибки:

Uncaught TypeError: Cannot read property 'width' of undefined fabric.js:14358
fabric.Image.fabric.util.createClass._setWidthHeight fabric.js:14358
fabric.Image.fabric.util.createClass._initConfig fabric.js:14334
fabric.Image.fabric.util.createClass.setElement fabric.js:14127
fabric.Image.fabric.util.createClass._initElement fabric.js:14322
fabric.Image.fabric.util.createClass.initialize fabric.js:14097
(anonymous function) fabric.js:2679
klass fabric.js:2728
reader.onload diapo.js:746

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

Все в одном я хотел бы добавить изображение на мой холст Fabricjs с теми же атрибутами, независимо от перетаскивания, что и в демонстрации Kitchensink. Заранее спасибо за вашу помощь :)


javascript canvas html jquery fabricjs
person SnoWhite    schedule 05.03.2013    source источник
comment
Разве не должно быть **img**.scale(getRandomNum(0.1, 0.25)).setCoords(); canvas.add(**img**); вместо **image**.scale(getRandomNum(0.1, 0.25)).setCoords(); canvas.add(**image**);?   -  person Kevin Heidt    schedule 15.07.2014

Ответы (2)


arrow_upward
16
arrow_downward

В вашем коде есть одна основная ошибка: вы пытаетесь добавить данные изображения в атрибут src объекта Fabric.Image.

Что вам нужно сделать, так это создать объект Image с вашим результатом и передать его объекту fabric.Image, например:

var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
  var image = new fabric.Image(imgObj);
}

Я сделал рабочий пример здесь: http://jsfiddle.net/jaibuu/Vp6wa/

person Jaibuu    schedule 05.03.2013
comment
Только что наткнулся на это решение. Это работает очень хорошо, однако мне нужны некоторые дополнительные функции. Видите ли, мне нужно иметь возможность добавлять дубликаты выбранного изображения. Приведенный выше код позволяет мне выбрать только 1 экземпляр файла изображения. Есть ли способ разрешить многократное использование одного и того же изображения? - person Mr Pablo; 17.04.2013
comment
В этом примере изображение создается и сохраняется как переменная imgObj, вы можете повторно использовать его и создавать новые объекты Fabric столько раз, сколько захотите ;). В любом случае было бы лучше создать новый более конкретный вопрос. - person Jaibuu; 18.04.2013
comment
@Jaibuu, вы пропустили скобку для закрытия функции imgObj.onload - person nicholaswmin; 29.04.2014
comment
Спасибо @Jaibuu, ты сделал мой день! :) - person Amit Kumar Khare; 20.12.2014
comment
для работы просто удалите all.js и включите ссылка на ткань.min.js. Ссылка All.js больше не существует. - person Gislef; 19.01.2016

arrow_upward
3
arrow_downward

Загрузите изображение на холст с компьютера с помощью Fabric js.

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function (f) {
    var data = f.target.result;                    
    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
    });
  };
  reader.readAsDataURL(file);
});
canvas{
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>

person Varun Sharma    schedule 06.05.2016