Почему 2 одинаковых изображения имеют разные dataUrls?

javascript html5-canvas data-uri todataurl

85 просмотра

1 ответ

У меня есть 2 изображения, оба сгенерированные через холст JavaScript. Я хочу проверить, идентичны ли оба изображения. Для этого я сгенерировал набор изображений и сохранил их в виде файлов PNG. Затем я попытался сравнить dataUrls как ранее сгенерированного изображения, так и нового сгенерированного изображения. Но dataUrls разные. Почему это так?

Я использовал compareот imagemagick для двойной проверки, что эти изображения действительно одинаковы. Единственное отличие состоит в том, что первый доступен в виде файла, а другой - через элемент canvas.

Я сгенерировал dataUrls следующим образом:

// first image: available as file:
<img src="image.png"> // var img = ...
var canvas1 = document.createElement('canvas')
canvas1.width = img.width
canvas1.height = img.height
canvas1.getContext('2d').drawImage(img,0,0)
canvas1.toDataURL()

// second image generated on canvas
canvas2.width = 500
canvas2.height = 500
canvas2.getContext('2d').rect(20,20,150,100);
canvas2.toDataURL()

Обратите внимание, что это проблема только для некоторых изображений, но не для всех. Простой пример, показанный выше, полностью работает.

Автор: Fuzzyma Источник Размещён: 08.11.2019 11:06

Ответы (1)


0 плюса

Решение

Я закончил тем, что создал два новых объекта изображения, которые я затем использовал, чтобы нарисовать их на другом холсте, из которого я получил dataUrl - они наконец-то совпали!

var imageToCanvas = function (img) {
    var canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    canvas.getContext('2d').drawImage(img, 0, 0)
    return canvas
}

let img1 = document.createElement('img')
let img2 = document.createElement('img')

let one, two

img1.onload = function(){
    one = imageToCanvas(img1)
    cb()
}

img2.onload = function(){
    two = imageToCanvas(img2)
    cb()
}

img1.src = canvas.toDataURL() // my images generated with the same parameters like the reference images
img2.src = images[i].src // my pregenerated reference images

let cb = function(){
    if(!one || !two) return

    console.log(one.toDataURL(),two.toDataURL()) // the same

}
Автор: Fuzzyma Размещён: 21.08.2016 01:59
Вопросы из категории :
32x32