1

Есть функция:

var h = Hermite.init('hermite-worker.js');

h.resize({
    source: document.getElementById('image'), // any canvas or image elements, jQuery or native
    width: 400,
    height: 600,
    output: 'image', // [optional] `image` or `canvas`. If not entered output is same as input element.
    quality: 0.7, // [optional] applicable for `image` output only
}, function(output) {
    //your callback
});

Пытаюсь на вход подать значение ранее созданного canvas следующим образом:

canvas.getContext('2d').drawImage(img, X, Y, W, H, 0, 0, canvas.width, canvas.height);
canvas.toDataURL("image/jpeg", 1.0);

h.resize({
    source: canvas,
    width: 400,
    height: 600,
    output: 'image', 
    quality: 0.7, 
}, function(output) {
    //your callback
});

... и получаю ошибку Uncaught TypeError: h.resize is not a function Очевидно, что функция срабатывает раньше, чем запишется canvas. Если же на вход подавать не canvas, а изображение через конструкцию

var image = new Image();
image.onload = function(){
  h.resize({
    source: image,      
    ...

то функция отрабатывает корректно. Перепробовал многое, в том числе решения вида

$.when( 
  canvas.toDataURL("image/jpeg", 1.0)
).then(function(){
  h.resize({      
    source: canvas, 

...но все тот же результат в виде ошибки.

Прошу помощи и совета, что изменить в коде, чтобы функция дожидалась создания canvas, а затем получала его значение в качестве входных данных?

2
  • Чем Вам не угодил перенос данных в Image с канвы и чтение оттуда?
    – user207618
    2 мар 2017 в 0:33
  • в конкретном случае первоначальный Image не виден, создавал его копию, сливал в него канвас, но функция не подхватывает его на вход. И ошибки нет, и срабатывать не срабатывает.
    – 118_64
    2 мар 2017 в 9:57

1 ответ 1

0

Прошу помощи и совета, что изменить в коде, чтобы функция дожидалась создания canvas, а затем получала его значение в качестве входных данных?

вот таким способом, функция вызовется после создания всех canvas

  $(window).load(function() {
canvas.getContext('2d').drawImage(img, X, Y, W, H, 0, 0, canvas.width, canvas.height);
canvas.toDataURL("image/jpeg", 1.0);
        h.resize({
           source: canvas,
           width: 400,
           height: 600,
           output: 'image', 
           quality: 0.7, 
        }, function(output) {
           //your callback
        });
     });

Все что связано с обработкой canvas и получением информации с формы перенесите в

$(window).load(function() { ... }

3
  • ошибка не выдаётся, но функция не подхватывает canvas
    – 118_64
    2 мар 2017 в 9:50
  • Обновил ответ, попробуйте.
    – Nikolai
    2 мар 2017 в 11:23
  • тот же результат
    – 118_64
    2 мар 2017 в 11:53

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.