Примеры сжатия изображений на холсте и методы изготовления карточек

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

При использовании тега ввода записи в формате html и типе файла вы можете вызвать фотоальбом вашего телефона, чтобы выбрать фотографии, а также вы можете поддержать камеру для съемки фотографий. В этом случае размер изображения может быть больше и превышать максимальный диапазон, поддерживаемый серверной частью, что приведет к сбою загрузки.

 <входной идентификатор=тип файла=файл>

1. Сначала получите файл изображения

 var eleFile = document.querySelector('#file'); var reader = new FileReader() eleFile.addEventListener('change', function (event) { file = event.target.files[0]; console.log(file) // Выбранный файл является изображением if (file.type.indexOf(image) == 0) { readAsDataURL(file } });

2. Теперь, когда вы получили файл изображения, вам нужно понять, как используется объект FileReader в js.

Объекты FileReader позволяют веб-приложениям асинхронно читать содержимое файла (или буфера необработанных данных), хранящегося на компьютере пользователя.

метод:

• readAsText: этот метод имеет два параметра, второй параметр — это метод кодирования текста, а значение по умолчанию — UTF-8. Этот метод очень прост для понимания. Файл читается в текстовом режиме, а результатом чтения является содержимое текстового файла.
• readAsBinaryString: этот метод считывает файл как двоичную строку. Обычно мы передаем его на серверную часть, и серверная часть может сохранить файл через эту строку.
• readAsDataURL: этот метод используется в примере программы. Этот метод считывает файл как строку, начинающуюся с data:. Суть этой строки — URL-адрес данных — это способ встраивания небольших файлов непосредственно в документ. план. Маленькие файлы здесь обычно относятся к файлам в таких форматах, как изображения и html. (Из этого получается метод base64.)

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

 var reader = new FileReader(); //Читаем файл на странице в виде URL-адреса данных readAsDataURL(file); Reader.onload=function(e) { console.log(reader) }

Теперь, когда изображение получено и преобразовано, его можно сжать.

 var eleFile = document.querySelector('#file'); var reader = new FileReader() eleFile.addEventListener('change', function (event) { file = event.target.files[0]; // console.log( file) // Выбранный файл является изображением if (file.type.indexOf(image) == 0) { var reader = new FileReader() // Преобразование файла в данные. Прочитайте страницу в виде URL-адреса readAsDataURL(file); reader.onload=function(e) { // console.log(this.result) var pre=document.getElementById(pre); pre.setAttribute(src, this.result ) CanvasDataURL(this.result, 100, 0.5) } } }) /* [canvasDataURL, сжатый холстом] * @params path Формат изображения base64* @params targetWidth Ширина сжатого изображения* @params качество Чем меньше значение качества изображения, тем размытее нарисованное изображение*/ function CanvasDataURL(path, targetWidth,quality) { var img = new Image(); img.src = path img.onload = function () { // var that = this // console.log(that) // Пропорциональное сжатие по умолчанию var w = this.width var h = this.height Scale = w / h; w = targetWidth h = targetWidth / Scale var качество = качество // Качество изображения по умолчанию — 0,7 // Создать холст var Canvas = document.createElement('canvas'); ctx = Canvas.getContext('2d'); // Создание узла атрибута var anw = document.createAttribute(width); anw.nodeValue = var anh = document.createAttribute(height); anh.nodeValue = h; Canvas.setAttributeNode(anw); Canvas.setAttributeNode(anh); ctx.drawImage(this, 0, 0, w, h); тем лучше Чем более размытым является нарисованное изображение var base64 = Canvas.toDataURL('image/jpeg',quality var); result=document.getElementById(result); result.setAttribute(src, base64) } }

Это очень просто, поэтому вы можете получить сжатое изображение. Из приведенного выше кода мы можем понять, что принцип заключается в том, что метод toDataURL в холсте может указывать формат и качество сжатия сжатого изображения, а также сжимать информацию холста и преобразовывать ее. для сжатия base64.

Сцена: объедините только что сжатое изображение с другим изображением, нажмите и удерживайте, чтобы сохранить.

 function drawCanvas (target) { var Canvas = document.querySelector('#myCanvas') var ctx = Canvas.getContext('2d') // Это физические пиксели на устройстве и независимые от устройства пиксели (дипы) Соотношение var dp = window.devicePixelRatio || 1 var backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1 var коэффициент = this.dp / this.backingStoreRatio var oldWidth = Canvas.width var oldHeight = Canvas.height Canvas.width = oldWidth * соотношение Canvas.height = oldHeight * соотношение Canvas.style.width = oldWidth + 'px' Canvas.style.height = oldHeight + 'px' ctx.scale(ratio, Ratio) var headerImg = new Image() var bgImg = новое изображение() headerImg.src = цель bgImg.src = '../bg.png' headerImg.onload = (e) => { // Соотношение сторон изображения varrate = headerImg.width/headerImg.height console.log(rate) bgImg.onload = (e) => { ctx.drawImage(headerImg, 10, 30, 50, (50 /rate) )) // Фоновое изображение ctx.drawImage(bgImg, 0, 0, 150, 150) ctx.fillText('Awesome', 80, 70) var resultImg = новое изображение() resultImg.src = Canvas.toDataURL('image/png', 1) resultImg.style.width = '100%' var cardImg=document . getElementById(cardImg); cardImg.setAttribute(src, resultImg.src) } }

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

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.