333

33 333
<style>  
        #combined-image {  
            display: block;  
            margin: 0 auto; /* 水平居中 */  
            max-width: 100%; /* 响应式宽度 */  
            height: auto;  
        }  
    </style>  <!-- 假设这是通过帝国CMS标签获取的文章标题 -->  
<div id="article-title">[!--pagetitle--]</div>  
  
<!-- 仅用于显示合成后的新图片 -->  
<img id="combined-image" src="" alt="Combined Image">  
  
<script type="text/javascript">  
    window.onload = function() {  
        createCombinedImage();  
    };  
  
    function createCombinedImage() {  
        // 获取文章标题  
        var title = document.getElementById('article-title').textContent.trim();  
          
        // 假设这是通过帝国CMS标签获取的图片列表（这里用硬编码的URL代替）  
        var imageUrls = [  
            'e/data/tmp/images/15.jpg', // 替换为实际的图片URL 1  
            'e/data/tmp/images/15.jpg'  // 替换为实际的图片URL 2  
        ];  
          
        if (imageUrls.length < 2) {  
            alert('至少需要两张图片才能合成！');  
            return;  
        }  
          
        // 随机选择一张图片  
        var randomIndex = Math.floor(Math.random() * imageUrls.length);  
        var imgUrl = imageUrls[randomIndex];  
          
        // 加载图片并创建Canvas进行合成  
        var img = new Image();  
        img.onload = function() {  
            var canvas = document.createElement('canvas');  
            canvas.width = 600; // 设定Canvas宽度  
            canvas.height = 350; // 设定Canvas高度  
            var ctx = canvas.getContext('2d');  
              
            // 绘制图片到Canvas上  
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);  
              
            // 绘制标题文本  
            drawText(ctx, title, canvas.width, canvas.height);  
              
            // 将Canvas内容转换为图片URL  
            var combinedImageUrl = canvas.toDataURL('image/png');  
              
            // 将合成后的图片URL设置到img元素上  
            document.getElementById('combined-image').src = combinedImageUrl;  
        };  
        img.src = imgUrl;  
    }  
      
    function drawText(ctx, text, width, height) {  
        ctx.font = '25px Arial'; // 设置字体样式  
        ctx.fillStyle = 'white'; // 设置文本颜色  
        ctx.textAlign = 'center'; // 设置文本水平居中  
        ctx.textBaseline = 'middle'; // 设置文本垂直居中  
          
        // 绘制文本背景  
        var textMetrics = ctx.measureText(text);  
        var textWidth = textMetrics.width;  
        var textHeight = 30; // 假设文本行高为20px  
        var textX = width / 2; // 文本水平居中位置  
        var textY = height / 2; // 文本垂直居中位置  
        var backgroundWidth = textWidth + 10; // 背景宽度加上内边距  
        var backgroundHeight = textHeight + 10; // 背景高度加上内边距  
        ctx.fillStyle = 'black'; // 设置背景颜色为浅灰色半透明  
        ctx.fillRect(textX - backgroundWidth / 2, textY - backgroundHeight / 2, backgroundWidth, backgroundHeight);  
          
        // 绘制文本到图片上  
        ctx.fillText(text, textX, textY);  
    }  
</script>  
333