petite-vue+html2canvas实现可编辑的内联照片海报文字编辑器效果代码-html代码-BFW代码库

petite-vue+html2canvas实现可编辑的内联照片海报文字编辑器效果代码

代码语言：html

所属分类：其他

代码描述：petite-vue+html2canvas实现可编辑的内联照片海报文字编辑器效果代码，双击照片切换到照片编辑模式，可编辑照片文字，编辑完后自动变成照片模式，适合文章内带文字海报可编辑功能的照片。

代码标签： petite-vue html2canvas 可编辑内联照片海报文字编辑

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,900;1,400;1,900&family=Raleway:ital,wght@0,400;0,900;1,400;1,900&display=swap");
:root {
  --c-peach: #e5a97e;
  --c-peach-light: #e5a97e44;
  --bg-color: #E6D9D0;
  --fg-color: #17171e;
  --accent-color: var(--c-peach);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Roboto, sans-serif;
  display: grid;
  grid-template-rows: 150px auto 150px;
}

header, .options {
  align-self: end;
  justify-self: center;
}

label, button {
  display: block;
  margin: 20px;
}

input[type=text] {
  padding: 10px;
  min-width: 50%;
  font-size: 20px;
  font-weight: bold;
  font-family: "Playfair Display", serif;
  font-style: italic;
}

textarea {
  font-family: "Raleway", sans-serif;
  min-width: 50%;
}

.........完整代码请登录后点击上方下载按钮下载查看