Давайте сначала поговорим об основных методах рисования на холсте, а именно:
const myCanvas = document.createElement('canvas'); myCanvas.width = 400; myCanvas.height = 400; const ctx = myCanvas.getContext('2d'); const img = new Image();img.src = 1.jpg;//В drawImage, когда изображение загружено, иначе изображение может быть еще не загружено img.onload=()=>{ ctx.drawImage(img, 0, 0, 100, 50);} грамматика:drawImage(изображение, x, y)
Начиная с указанной точки координат на холсте, нарисуйте все изображение в соответствии с исходным размером изображения.
drawImage(изображение, x, y, ширина, высота)
Начиная с указанной точки координат на холсте, нарисуйте все изображение заданного размера (ширины и высоты), и изображение автоматически масштабируется.
drawImage(изображение, imageX, imageY, imageWidth, imageHeight, x, y, ширина, высота)
Нарисуйте часть изображения указанного изображения (прямоугольную часть с (imageX, imageY) в качестве верхнего левого угла, шириной как imageWidth и высотой как imageHeight) на холсте с (x, y) в качестве координаты верхнего левого угла, ширина как ширина, а высота как высота в прямоугольной области.
Бизнес-сценарий сшивания нескольких изображений заключается в создании индивидуальных общих изображений с различным содержанием. Используемые элементы изображения включают фоновые изображения, изображения внешних ссылок, логотипы веб-сайтов и настроенные изображения QR-кода. Все проблемы, которые необходимо решить, уже есть. Создается при преобразовании холста в изображение. Есть три основных момента:
1. Междоменные проблемы изображений;
2. Рисование нескольких изображений приведет к загрязнению холста;
3. Размер рисунка;
Прежде всего, существует междоменная проблема изображений. В Интернете много соответствующей информации. Решение следующее:
img.setAttribute('crossOrigin', 'анонимный');После решения междоменной проблемы после сшивания и экспорта нескольких изображений появилось новое сообщение об ошибке:
Неперехваченное исключение DOMException: не удалось выполнить toDataURL для HTMLCanvasElement: испорченные холсты невозможно экспортировать.
Когда я обнаружил эту проблему, я проверил информацию в Интернете, и большинство из них были решены с помощью описанного выше междоменного метода, но в моем бизнес-сценарии он явно не работал.
Устранив неполадки в коде, я обнаружил, что об этой ошибке не будет сообщено при использовании фонового изображения + изображения QR-кода. Если изображение внешней ссылки обрабатывается в междоменном режиме, оно не сообщит об ошибке при использовании отдельно. Все изображения логотипов представляют собой локальные файлы и, очевидно, не должны вызывать междоменных проблем.
Таким образом, причина, по которой изображение QR-кода и фоновое изображение не содержат ошибок, заключается в том, что источник изображения QR-кода имеет формат base64.
Итак, я попытался использовать холст для экспорта изображения логотипа в формат base64, а затем объединил его с фоновым изображением + изображением QR-кода. Конечно же, при экспорте не было обнаружено никаких ошибок.
Всех проблем с Tainted Canvases при совместном экспорте нескольких изображений можно избежать, переведя элементы изображения в формат base64.
Поскольку в моем бизнес-сценарии есть изображения внешних ссылок, и не все внешние ссылки обработали доменное имя моего веб-сайта, чтобы обеспечить междоменную обработку, поэтому при создании данных base64 изображения внешней ссылки я использую событие img.onerror. обработка, замененная диаграммой по умолчанию.
Поскольку несколько изображений обрабатываются отдельно, прежде чем будет нарисовано общее изображение, возможно, лучше использовать обработку Promise.
Что касается размера экспорта изображения, попробуйте использовать
myCanvas.toDataURL('изображение/jpeg', encoderOptions)encoderOptions: вы можете выбрать качество изображения от 0 до 1. Если диапазон значений превышен, будет использоваться значение по умолчанию 0,92. Остальные параметры игнорируются.
Вышеупомянутое — это личное изложение моего опыта объединения нескольких изображений на холсте и их экспорта. Я надеюсь, что это будет полезно для обучения каждого, а также надеюсь, что все поддержат сеть VeVb Wulin.