Как загрузить изображения QR-кода и водяных знаков на холст

Вчера я представил плагин для генерации QR-кодов QRCode.js, который рисуется с помощью HTML5 Canvas. Итак, главный герой сегодняшнего дня – холст – практическое применение холста.

HTMLCanvasElement предоставляет метод toDataURL, который возвращает URI данных, содержащий формат представления изображения, указанный параметром типа. С помощью этого метода мы можем создать изображение QR-кода и загрузить его. Примеры следующие:

 /*html*/<div id=qrcode>div><a href=javascript:; download=QR-код id=down>Загрузить QR-код</a>/*js*/var Canvas = document.getElementsByTagName('canvas' )[0];var downImg = document.getElementById('down')img.href = document.getElementsByTagName('canvas')[0].toDataURL('image/png')

Вы можете легко добавлять водяные знаки к изображениям, используя методы холста fillText и drawImage. Примеры следующие:

 /*html*/<canvas id=canvas></canvas>/*js*/var img = new Image() // Создаем элемент img var Canvas = document.getElementById('canvas')var ctx = Canvas.getContext; ('2d');img.src = 'myImage.png';img.onload = function(){ ctx.drawImage(img, 0, 0); ctx.font=30px yahei; //Устанавливаем текст водяного знака ctx.fillText(большой интерфейс, 1100, 260)}

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