Создание изображений из HTML

внешний интерфейс HTML Canvas

生成效果图片

— литр

Требования к проекту

1. Добавьте информацию об администраторе в интерфейс, включая (имя, возраст, аватар и т. д.) 2. Отобразите информацию администратора о конкретном фоновом изображении и загрузите его на фоновый сервер в виде сгенерированного изображения (формат base64илиформат файла)

Реализовать идеи

1. Используйте позиционирование, чтобы установить информацию администратора на указанном фоновом изображении. 2. Используйте html2canvas для создания холста из указанного div. 3. Закодируйте сгенерированный холст или загрузите сгенерированный файл (рекомендуется загрузка в формате base64).

Дополнительные возможности

Загрузите изображение локально, выполните кодирование base64 и повторите его. Поддержка локальной загрузки после создания холста

Сжать изображения

Использование API холстаЧем меньше значение качества, тем размытее нарисованное изображение и меньше соответствующее изображение.Установите соответствующее значение в соответствии с вашими потребностями

 var base64 = canvas.toDataURL('image/jpeg', quality );

Нажмите, чтобы посетитьДемонстрационный адрес

Следующие примечания кратко знакомят с использованием html2canvas.
официальный сайт html2canvas github

1. Как использовать

 html2canvas(document.getElementById('diploma'), {
        onrendered: function(canvas) {
            $('#view').html(canvas);  // 容器
        },
        width: 547,
        height: 398
    });

diplomaHTML-контейнерviewПоместите контейнер, в котором будет генерироваться изображение, установите фиксированные ширину и высоту (547 * 398)

Уведомление:при создании изображенийКонтейнер диплома нельзя заблокировать, иначе не получится сгенерировать полную канву

2. Базовый общий API

имя параметра тип По умолчанию описывать
background string #fff Если вы используете здесь фоновое изображение png, но используйте, если по умолчанию нет прозрачного
height number null Требуется ручная настройка
width number null Требуется ручная настройка
timeout number 0 Задержка загрузки изображения По умолчанию 0
timeout number 0 Задержка загрузки изображения По умолчанию 0

Посмотреть другие APIРуководство на официальном сайте

3. Кодировка base64 заголовка локальной загрузки (эхо)

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

  var r = new FileReader()  
    r.readAsDataURL(file)  
    r.onload = function(e){
        $('.avatar img').attr('src', e.target.result)  // 将img  src设置base64
 }

прикреплятьFileReaderДетальная документация по объекту

4. Загрузка холста в base64

Преобразуйте холст, сгенерированный html2canvas, в base64 для загрузки.

var canvas = document.querySelector("#view canvas")
    var dataURL = canvas.toDataURL("image/png");
    dataURL = dataURL.split(",")[1];
    return dataURL

прикреплятьcanvas APIДокументация

Меры предосторожности

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

После группировки нажмите «Загрузить» и используйте js, чтобы преобразовать холст в файл для загрузки.

function Download(){
    //cavas 保存图片到本地  js 实现
    //------------------------------------------------------------------------
    //1.确定图片的类型  获取到的图片格式 data:image/Png;base64,......
    var type ='png';//你想要什么图片格式 就选什么吧
    var d=document.querySelector('#view canvas');
    var imgdata=d.toDataURL(type);
    //2.0 将mime-type改为image/octet-stream,强制让浏览器下载
    var fixtype=function(type){
        type=type.toLocaleLowerCase().replace(/jpg/i,'jpeg');
        var r=type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/'+r;
    };
    imgdata=imgdata.replace(fixtype(type),'image/octet-stream');
    //3.0 将图片保存到本地
    var savaFile=function(data,filename)
    {
        var save_link=document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href=data;
        save_link.download=filename;
        var event=document.createEvent('MouseEvents');
        event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
        save_link.dispatchEvent(event);
    };
    var filename=''+new Date().getDate()+'.'+type;
    //直接用当前几号做的图片名字
    savaFile(imgdata,filename);
};
Это просто демонстрация только для справки, код беспорядочный и нуждается в улучшении.
Категории