как только у холста появляется фоновое изображение, canvas.toDataURL('png') перестает работать

Я установил фоновое изображение холста, используя:

canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas));

Он отлично работает, но теперь мой

canvas.toDataURL('png')

перестает работать.

А также очистка холста не очищает фоновое изображение. Не могли бы вы объяснить, где я иду не так.

Код ниже работает нормально, пока я не добавлю фоновое изображение.

document.getElementById('save').onclick = function() {       
   window.open(canvas.toDataURL('png')); 
}

Также:

canvas.clear();

Код не очищает фоновое изображение.


canvas fabricjs
person John    schedule 19.08.2013    source источник
comment
Вы получаете ошибку безопасности в своей консоли? Если изображение из другого домена, canvas.toDataURL() не работает (whatwg.org/specs/web-apps/current-work/multipage/, developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image) canvas.clear() не удалял фон изображение. Вы можете использовать canvas.setBackgroundImage().   -  person Kienz    schedule 19.08.2013
comment
Нет, в консоли не отображается ошибка. У меня открывается новое окно с данными base-64, но изображение не отображается.   -  person John    schedule 19.08.2013
comment
Какой браузер вы используете? Если вы используете IE9, он не работает (github.com/kangax/fabric.js/ вопросы/172). В хроме у меня работает.   -  person Kienz    schedule 21.08.2013
comment
Я использую хром. Это не работает :(.   -  person John    schedule 21.08.2013
comment
Я сделал небольшой jsfiddle: jsfiddle.net/Kienz/XuVEh   -  person Kienz    schedule 22.08.2013
comment
Обновил jsfiddle — теперь он использует setBackgroundImage и все еще работает. Вы проверили это?   -  person Kienz    schedule 23.08.2013
comment
Спасибо теперь работает   -  person John    schedule 26.08.2013
comment
Вы можете закрыть этот вопрос, Джон?   -  person Simon Sarris    schedule 24.01.2014

Ответы (1)


arrow_upward
0
arrow_downward

var canvas = window._canvas = новая ткань.Canvas('c');

canvas.setBackgroundImage(document.getElementById('img1').src, canvas.renderAll.bind(canvas));

document.getElementById('dataurl').addEventListener('click', function () {
    window.open(canvas.toDataURL());
});
person John    schedule 27.01.2014