Javascript/jQuery的插件SVG SketchPad怎么使用

发布时间:2022-02-23 16:57:12 作者:iii
来源:亿速云 阅读:323

本文小编为大家详细介绍“Javascript/jQuery的插件SVG SketchPad怎么使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“Javascript/jQuery的插件SVG SketchPad怎么使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

使用代码

要使用代码,只需包含editor.js文件并初始化为常规 jQuery 插件。 

下面的示例代码创建了(#content) 一个具有所需尺寸区域的简单<div/>  。然后在 jQuerydocument.ready函数中创建一个 jQuery 对象并附加 change 事件处理程序。在此处理程序中,它使用 Scribble 的对象toText 函数将绘图作为 svg 文本字符串,并将预览 #res 元素的值设置为该 svg。

此外,它还获取绘图的 PNG 值并将预览图像设置为该值。由于图像加载不是在浏览器中的即时操作,因此当图像准备好时,将调用作为函数参数提供的事件处理程序。

<div id="content" 
        style='position:absolute; width:600px; height:400px; left:100px; border:solid;'></div>
<script src="Editor.js"></script>
<script>
        $(document).ready(function() {
            $('#content').Scribble().change(function() {
                $('#res').html($(this).Scribble('toText', 'svg'));
                $(this).Scribble('toText', 'png', function(img) {
                    $('#img').attr('src', img);
                });
            });
        });    
</script>
<img id='img' style='border:solid;position:absolute; top:450px; left:5px; width:200px; height:130px;'>
<div id='res' style='border:solid;position:absolute; top:450px; left:210px;'></div>

这里有三种有趣的方法:

        ○ svg - 返回值作为 SVG 字符串

        ○ base64 - SVG base64 编码的值

        ○ mix - 如果 SVG 包含 unicode 字符 (emojii),则使用 base64 编码,否则返回非编码值

        ○ pngjpeg 或任何其他没有“imamge/”部分的图像 mime 类型。调用时,返回值是 base64 编码值。图像将在 OnLoad 方法中返回(此处需要)

支持的工具

兴趣点

Base64 编码

在某些时候对最终产品进行故障排除,我遇到了 emojii 无法正确重新加载的问题。我花了一段时间才意识到我的数据库列是 varchar(max) 并且不存储 unicode。由于其他项目使用相同的数据库,因此我决定将SVG编码为base 64,而不是更改列类型。不幸的是,浏览器中的btoa函数有问题,因此需要一些时间才能找到解决方案。

SVG 加载/兼容性

SVG 是一种完整的语言。我从来没有打算能够支持 SVG 规范中定义的所有功能,只是为了能够加载我之前创建的文档。请不要仅使用随机的 SVG 文档来尝试它 - 它很可能不起作用。

读到这里,这篇“Javascript/jQuery的插件SVG SketchPad怎么使用”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. Java如何调用Javascript、Python算法
  2. JavaScript中实现烟花绽放动画效果的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript jquery

上一篇:如何使用Selenium和JavaScript启动测试自动化

下一篇:怎么动态加载JavaScript文件

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》