问题描述
我正在开发一个简单的工具,允许用户上传图像(主要是书籍封面)、添加特定背景、创建阴影然后下载。
我正在使用 dom-to-image 库,理论上它可以工作。我现在可以生成一个 SVG 文件,但是当我尝试将其转换为 JPEG 时,它看起来像是空的。
现在,我对这个库没有太多经验,我想知道这是不是因为图像实际上没有存储在那里,如果是这样,我该如何让它工作。
如果有人会问,我已经尝试过 html2canvas,但它的问题在于它不允许框阴影。
这些是最重要的代码部分,也可以在此处预览该工具:Contains
HTML
. ____ _ __ _ _
/\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
\\/ ___)| |_)| | | | | || (_| | ) ) ) )
' |____| .__|_| |_|_| |_\__,| / / / /
=========|_|==============|___/=/_/_/_/
:: Spring Boot :: (v2.4.3)
o.s.web.servlet.dispatcherServlet : Completed initialization in 0 ms
2021-02-27 12:52:37.406 INFO 17984 --- [nio-8080-exec-1] c.e.springmultirequest.DetailController : idRequest: 1
2021-02-27 12:52:37.406 INFO 17984 --- [nio-8080-exec-1] c.e.springmultirequest.DetailController : Name: john
2021-02-27 12:52:37.622 INFO 17984 --- [nio-8080-exec-6] c.e.springmultirequest.DetailController : idRequest: 2
2021-02-27 12:52:37.622 INFO 17984 --- [nio-8080-exec-6] c.e.springmultirequest.DetailController : Name: john
2021-02-27 12:52:37.622 INFO 17984 --- [nio-8080-exec-6] c.e.springmultirequest.DetailController : Last name: cena
2021-02-27 12:52:37.676 INFO 17984 --- [nio-8080-exec-8] c.e.springmultirequest.DetailController : idRequest: 3
2021-02-27 12:52:37.676 INFO 17984 --- [nio-8080-exec-8] c.e.springmultirequest.DetailController : mobileNumber: 09XXXXXXX0
2021-02-27 12:52:37.676 INFO 17984 --- [nio-8080-exec-8] c.e.springmultirequest.DetailController : email: nick@yahoo.com
2021-02-27 12:52:37.738 INFO 17984 --- [nio-8080-exec-5] c.e.springmultirequest.DetailController : idRequest: 4
2021-02-27 12:52:37.738 INFO 17984 --- [nio-8080-exec-5] c.e.springmultirequest.DetailController : pet: dog
2021-02-27 12:52:37.738 INFO 17984 --- [nio-8080-exec-5] c.e.springmultirequest.DetailController : color: black
2021-02-27 12:52:37.738 INFO 17984 --- [nio-8080-exec-5] c.e.springmultirequest.DetailController : sex: F
JS
<div id="app">
<div class="buttons-shadow">
<button id="buttonShadow1">Small Shadow</button>
<button id="buttonShadow2">Medium Shadow</button>
<button id="buttonShadow3">Big Shadow</button>
</div>
<div class="file-upload" id="capture">
<div class="image-upload-wrap">
<input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" />
<div class="drag-text">
<h3>Drag and drop a file or select add Image</h3>
</div>
</div>
<div class="file-upload-content">
<img class="file-upload-image" id="scream" src="#" alt="your image" />
<div class="image-title-wrap">
<button type="button" onclick="removeImage()" class="remove-image">Remove <span class="image-title">Image</span></button>
</div>
</div>
</div>
<div class="right">
<button id="saveImage" @click="saveCanvas()">Save<br>Image</button>
</div>
<button onclick="screenshot()">Take screenshot</button>
</div>
非常欢迎任何建议或建议。如果您有关于如何使用 html2canvas 的想法也会很棒。
非常感谢您的帮助!
最好的, 马可
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)