Чистый передний конец JS Реализация Изображение сливается и скачать

1. Сценарии спроса

1. Комбинация динамического QR-кода на интерфейсе

2. Технология водяных знаков

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

3. Есть еще много сценариев...

2. Решения

Предпосылка решения состоит в том, чтобы использовать способность клиента решить его исключительно с помощью внешнего интерфейса. Как интерфейсному разработчику, Canvas вполне достаточно для рисования, 2D и 3D могут быть завершены, мое решение здесь — использовать для этого Canvas. Прежде всего, вам нужно использовать способность холста к рисованию.Сначала необходимо знать относительное положение и размер двух изображений, которые нужно объединить.Это требует, чтобы вы сначала общались с визуальными одноклассниками.CanvasAPI имеет следующие триgetContext,drawImage,toDataURL, давайте взглянем на эти три API.

1. Метод получения контекста

var ctx = canvas.getContext(contextType, contextAttributes);

2. метод DrawImage

Метод drawImage — это метод в контексте, полученном с помощью getContext выше, но он может быть вызван только тогда, когда contextType равен 2d, то есть его можно использовать только при использовании двумерного изображения, и его можно использовать для рисования и комбинировать изображения в соответствии с входным параметром управления. , вырез.

void ctx.drawImage(image, x, y);

Расположите изображение изображения на холсте с длиной координаты x и длиной координаты y, а размер нарисованного изображения - это размер самого изображения, которым нельзя управлять.

void ctx.drawImage(image, x, y, width, height);

Расположите изображение на холсте с координатами x и y, а также укажите ширину и высоту изображения.

void ctx.drawImage(image, x, y, width, height, dx, dy, dWidth, dHeight);

Расположите изображение изображения на холсте с координатами длины x и длины координаты y и укажите ширину и высоту изображения изображения, затем вырежьте его, поместите в координаты (dx, dy) и укажите ширина и высота, я чувствую, что вы можете сделать быстрое текстовое увеличительное стекло.

3. метод toDataURL

canvas.toDataURL(type, encoderOptions);

Метод элемента toDataURL также предоставляется методом HTMLCanvasElement, при вызове метода HTMLCanvasElement.toDataURL() возвращает URL-адрес данных, содержащий формат отображения изображения, подобный этомуdata:[<mediatype>][;base64],<data>.

Этот метод может принимать два параметра.

type: Создать тип dataURL, по умолчанию используется тип изображения/png, если вам нужно сгенерировать jpg или другие типы, вы можете передать его.

encoderOptions: необязательный параметр, параметр качества сгенерированного URL-адреса данных, значение по умолчанию — 0,92, и можно передать десятичное число от 0 до 1. Чем больше значение, тем выше качество и тем больше и длиннее генерируется строковая информация.

3. Процесс реализации

1. Создайте холст

Сначала создайте холст холста и поместите первое изображение, обычно фоновое изображение, в холст. Здесь следует отметить, что первым параметром метода drawImage является элемент HTMLImageElement.Вы можете получить элемент тега img на странице с помощью document.querySelector или сгенерировать его с помощью createElement('img'), в зависимости от того, изображение отображается на странице писать.

// html
<img id="img" />
// javascript
class Canvas {
  // 创建canvas
  constructor (config = {}) {
    this.canvas = document.createElement('canvas');
    this.canvas.width = config.bgWidth;
    this.canvas.height = config.bgHeight;
    this.ctx = this.canvas.getContext('2d');
  }
  // 画图到画布上
  async run(config) {
    // images是HTMLImageElement元素，而非链接地址
    const image = await getImage(config.src);
    this.ctx.drawImage(image, config.x, config.y, config.width, config.height);
  }
  // 验证使用，将生产的图呈现到页面上
  print() {
    document.querySelector('#img').setAttribute('src', this.canvas.toDataURL());
  }
}
// 调用
const mycanvas = new Canvas({
   bgWidth: 500,
   bgHeight: 600
})
mycanvas.run({
  src: 'https://n.sinaimg.cn/ent/transform/460/w630h630/20180824/Zaob-hicsiaw3749625.jpg',
  x: 0,
  y: 0,
  width: 250,
  height: 600
}).then(() => {
  // 画到页面上
  mycanvas.print()
})

2. Сборка

Дважды на одном и том же ctx два изображения объединяются drawImage, и слияние завершается.

// html<img id="img" />
// javascript
// canvas合成操作
class Canvas {  
  ...  
  async run2(img1, img2) {    
    const images = [img1, img2];
    const imgSrcs = images.map(({ src }) => getImage(src));    
    const imgEles = await Promise.all(imgSrcs);    
    imgEles.map((ele, i) => {      
       if (ele) {        
          const { x = 0, y = 0, width = 0, height = 0 } = images[i];        
          this.ctx.drawImage(ele, x, y, width, height);
      }
    });
  }
  ...
}
// 调用
const mycanvas = new Canvas({  
  bgWidth: 500,
  bgHeight: 600
})
mycanvas.run({
  src: 'https://n.sinaimg.cn/ent/transform/460/w630h630/20180824/Zaob-hicsiaw3749625.jpg',
  x: 0,
  y: 0,
  width: 250,
  height: 600
}, {
  src: 'https://n.sinaimg.cn/ent/transform/460/w630h630/20180824/Zaob-hicsiaw3749625.jpg',
  x: 250,
  y: 0,
  width: 250,
  height: 600
}).then(() => {
  // 画到页面上
  mycanvas.print()
})

3. Результат вызова следующий

4. Реализуйте метод загрузки

class Canvas {
  ...
  download() {
    // 文件流式下载
    this.canvas.toBlob(blob => {
      const a = document.createElement('a');
      a.download = 'image.png';
      a.style.display = 'none';
      a.href = URL.createObjectURL(blob);
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    });
  }
  ...
}

4. Публикация в NPM, совместное использование с открытым исходным кодом

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

адрес пакета npm

https://www.npmjs.com/package/composite-image

адрес выдачи

https://github.com/FantasyGao/composite-image/issues

// 直接安装使用npm/cnpm i --save composite-image
// 也可以在html文件直接引入
<script src='node_module/composite-image/composite-image.js'></script>

Добро пожаловать, чтобы использовать и сделать несколько предложений, спасибо.

Прием на работу

Фронтенд-инженер:

• Опыт работы от 2-х лет, степень бакалавра или выше.

• Иметь хороший интерфейс HTML / CSS / JS, опыт разработки основных фреймворков, таких как react / vue, и глубокое понимание его принципов, знакомство с инструментами упаковки webpack, Rollup.

• Сильный интерес к интернет-продуктам и веб-технологиям, сильные способности к самостоятельному вождению, способность к обучению и сильный предприимчивый дух.

• Базовые знания о компьютерных сетях имеют хорошую основу.

• (Плюсы) Опыт серверной разработки.
  

• (Дополнительные баллы) Опытный в мобильной H5 / гибридной разработке;

• (Дополнительные пункты) Существует достаточно практик и методов для оптимизации производительности мобильного интерфейса;

• (Плюс) Знаком с опытом разработки мини-программ.

• (Плюсы) Знаком с асинхронным программированием node.js, понимаю основной принцип работы nodejs.

• (Дополнительные баллы) Базовые знания в области финансов и лучшее понимание связанных с ними технологий в сфере платежей.

Инженер JAVA (финансовая сфера)

• Участвовать в исследованиях и разработках новых финансовых продуктов Ant, интегрироваться с существующими цифровыми финансовыми секторами и создавать более гибкий и инклюзивный опыт оплаты;

• Участвовать в проектировании, разработке и внедрении сопутствующих приложений и функциональных модулей;

• Способность решать технические или бизнес-задачи в вышеуказанных областях инновационными способами.

• Более 3-х лет опыта R&D в распределенных системах крупных и средних интернет-компаний;

• Лучше иметь front-end навыки;

• Ясное и быстрое мышление, сильная способность к общению и координации и сильная способность принимать решения.

• Предпринимательский дух, способный сохранять страсть к работе и чувство ответственности перед лицом множества неопределенностей и перемен.

стажер